@use "../termeh" as T;

.content {
    display: block;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    overflow-y: auto;
    @include T.scrollable(T.color("primary"));

    > .overlay {
        display: flex;
        position: absolute;
        box-sizing: border-box;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        opacity: 0;
        z-index: -1;
        overflow: hidden;
        overflow-y: auto;
        color: T.var("overlay", "color");
        background: T.var("overlay", "background");
        backdrop-filter: T.var("overlay", "filter");
        @include T.transition(all);
        @include T.scrollable(T.color("primary"));

        > * {
            margin: auto;
            max-width: 100%;
        }
    }

    &.is-centered {
        display: flex;
        > * {
            margin: auto;
        }
    }

    &.is-loading {
        overflow-y: hidden;
        @include T.overlay(
            T.var("overlay", "background"),
            T.var("overlay", "filter")
        );
        @include T.loader(
            T.var("spinner", "size"),
            T.var("overlay", "color", T.color("shade")),
            T.var("decorator", "size")
        );
    }

    &.is-overlaid:not(.is-loading) {
        > .overlay {
            z-index: 2;
            opacity: 1;
        }
    }

    &:not(.is-paddingless) {
        padding: T.gap("macro");

        > .overlay {
            padding: T.gap("macro");
        }

        @each $name, $gap in T.gaps(T.var("content", "gaps", ())) {
            &.is-#{$name}-padded {
                padding: $gap;

                > .overlay {
                    padding: $gap;
                }
            }
        }
    }

    @each $name, $color in T.colors(T.var("content", "colors", ())) {
        &.is-#{$name} {
            @include T.scroll-color($color);

            > .overlay {
                @include T.scroll-color($color);
            }

            &.is-loading {
                @include T.loader-color($color);
            }

            @include T.selection($name);
        }
    }
}