@charset 'utf-8';

/*  ========================================================================
    JUICE -> ELEMENTS -> LAYOUT -> OVERLAY
    ========================================================================  */

// Check if the elements with overlay should be imported
@if $import-elements and $import-element-overlay {
    .has-overlay {
        // Styles
        overflow: hidden;

        // Nested selectors
        .overlay {
            animation-duration: $overlay-animation-duration;
            background: $overlay-background-color;
            color: $overlay-font-color;
            height: 100vh;
            left: 0;
            outline: none;
            position: fixed;
            top: 0;
            width: 100vw;
            z-index: stack-index('overlay');
        }
    }
}