:root {
    --layer-locked-filter: blur(5px);
    --layer-fade-duration: 0.3s;
    --layer-delay-duration: 0.3s;
    --layer-mask-background-color: rgba(1, 1, 1, 0.5);
}

.layer-root {
    position: static;

    &[data-status="locked"] {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translate(0);
        overflow-y: hidden;
    }
}

// TODO: Should this be fixed?
.layer-fixed {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 0;
    transform: scale(1);
    z-index: 2;
}

.layer-overlay {
    position: fixed;
    z-index: 3;
}

.layer-flyout {
    position: fixed;
    z-index: 4;
}

body.body-scroll {
    &[data-lock="hide"] {
        .layer-root {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            transform: translate(0);
            overflow-y: hidden;
        }

        .layer-root,
        .layer-fixed {
            margin-right: var(--scrollbar-width);
        }
    }
}