@include namespace('lightbox') {
    @include store((
        --colors: (
            --bg: prop(--colors --bg-hi, $global: true),
            --button: (
                --idle:  prop(--colors --fg-hi, $global: true),
                --hover: prop(--colors --fg-lo, $global: true),
                --bg:    prop(--colors --bg-hi, $global: true),
            )
        ),
        --dims: (
            --pad: 1rem,
        ),
    ));

    @include component(namespace()) {
        display:         flex;
        visibility:      hidden;
        position:        fixed;
        z-index:         5000;
        top:             0;
        left:            0;
        box-sizing:      border-box;
        flex-direction:  column;
        align-items:     center;
        justify-content: center;
        width:           100%;
        height:          100%;
        padding-bottom:  3vh;
        transition:      opacity .2s, visibility .2s;
        opacity:         0;

        @include element('bg') {
            position:         absolute;
            z-index:          -10;
            top:              0;
            left:             0;
            width:            100%;
            height:           100%;
            opacity:          .85;
            background-color: prop(--colors --bg);
        }

        @include is('shown') {
            visibility: visible;
            transition: opacity .2s, visibility 0 .2s;
            opacity:    1;
        }

        @include element('infobar') {
            display:     flex;
            box-sizing:  border-box;
            flex:        0 0 auto;
            align-items: center;
            width:       100%;
            padding:     0 prop(--dims --pad);
        }

        @include element('img') {
            max-width:     100%;
            min-height:    0;
            max-height:    100%;
            margin-top:    auto;
            margin-bottom: auto;
        }

        @include element('close', 'prev', 'next') {
            margin:           0;
            transition:       color .2s;
            border:           0;
            background-color: transparent;
            color:            currentColor;

            &:hover {
                color: prop(--colors --button --hover);
            }
        }

        @include element('close') {
            margin:      0 calc(-1 * #{prop(--dims --pad)}) 0 auto;
            padding:     prop(--dims --pad);
            font-size:   1.5em;
        }

        @include element('prev', 'next') {
            position:            absolute;
            top:                 50%;
            padding:             2rem .5rem;
            transform:           translate(0, -50%);
            font-size:           3em;
            --icon-stroke-width: .75px;

            &::before {
                content:          '';
                display:          block;
                position:         absolute;
                z-index:          -1;
                top:              50%;
                left:             50%;
                width:            1.2em;
                height:           1.2em;
                transform:        translate(-50%, -50%);
                opacity:          .25;
                background-color: prop(--colors --button --bg);
            }
        }

        @include element('prev') {
            left: 0;
        }

        @include element('next') {
            right: 0;
        }
    }
}