@use '../core/styles/common/tokens' as *;

@mixin kbq-loader-overlay-theme() {
    // FIXME: move to unified mixin if necessary
    .kbq-loader-overlay_filled {
        &.kbq-loader-overlay {
            background: var(--kbq-loader-overlay-filled-overlay-background);
        }

        .kbq-loader-overlay-text {
            color: var(--kbq-loader-overlay-filled-text-color);
        }

        .kbq-loader-overlay-caption {
            color: var(--kbq-loader-overlay-filled-caption-color);
        }
    }

    .kbq-loader-overlay_transparent {
        &.kbq-loader-overlay {
            background: var(--kbq-loader-overlay-transparent-overlay-background);
        }

        .kbq-loader-overlay-text {
            color: var(--kbq-loader-overlay-transparent-text-color);
        }

        .kbq-loader-overlay-caption {
            color: var(--kbq-loader-overlay-transparent-caption-color);
        }
    }

    .kbq-loader-overlay_card {
        &.kbq-loader-overlay_filled,
        &.kbq-loader-overlay_transparent {
            background: color-mix(
                in srgb,
                var(--kbq-loader-overlay-card-overlay-background) /* color-mix only allows percentage value */
                    calc(var(--kbq-opacity-overlay) * 100%),
                transparent
            );
        }
    }
}

@mixin kbq-loader-overlay-typography() {
    .kbq-loader-overlay_big {
        .kbq-loader-overlay-text {
            @include kbq-typography-level-to-styles-css-variables(typography, headline);
        }

        .kbq-loader-overlay-caption {
            @include kbq-typography-level-to-styles-css-variables(typography, text-big);
        }
    }

    .kbq-loader-overlay_normal {
        .kbq-loader-overlay-text {
            @include kbq-typography-level-to-styles-css-variables(typography, subheading);
        }

        .kbq-loader-overlay-caption {
            @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
        }
    }

    .kbq-loader-overlay_compact {
        .kbq-loader-overlay-text {
            @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
        }

        .kbq-loader-overlay-caption {
            @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
        }
    }
}