.modal {

@include vendor('display', 'flex');
@include vendor('align-items', 'center');
@include vendor('justify-content', 'center');
@include vendor('pointer-events', 'none');
@include vendor('user-select', 'none');
@include vendor('transition', (
    'opacity #{_duration(lightbox-fadein)} ease',
    'visibility #{_duration(lightbox-fadein)}',
    'z-index #{_duration(lightbox-fadein)}'
));
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
outline: 0;
visibility: none;
z-index: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
background-color: transparentize(_palette(bg), 1 - _misc(lightbox-opacity));

.inner {
    @include vendor('transform', 'translateY(0.75rem)');
    @include vendor('transition', (
        'opacity #{_duration(lightbox-fadein) * 0.5} ease',
        'transform #{_duration(lightbox-fadein) * 0.5} ease'
    ));
    opacity: 0;
}

&.visible {
    @include vendor('pointer-events', 'auto');
    opacity: 1;
    visibility: visible;
    z-index: _misc(z-index-base) + 1000;
}

&.loaded {
    .inner {
        @include vendor('transform', 'translateY(0)');
        @include vendor('transition', (
            'opacity #{_duration(lightbox-fadein)} ease',
            'transform #{_duration(lightbox-fadein)} ease'
        ));
        opacity: 1;
    }
}

}