@use '../../variables' as *;

$b: '.overlay';

:root {
    --overlay-z-index: 900;
}

#{$b} {
    background-color: $overlay-bg;
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    transform: translateX(-100%);
    transition-duration: var(--duration-leave-s);
    transition-property: opacity;
    transition-timing-function: var(--easing-acceleration);
    width: 100%;
    z-index: var(--overlay-z-index);

    &_active {
        opacity: 1;
        transform: translateX(0);
        transition-duration: var(--duration-enter-s);
        transition-timing-function: var(--easing-deceleration);
    }
}