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

@mixin kbq-empty-state-theme() {
    .kbq-empty-state_normal-color {
        .kbq-empty-state-title {
            color: var(--kbq-empty-state-title);
        }

        .kbq-empty-state-text {
            color: var(--kbq-empty-state-color);
        }
    }

    .kbq-empty-state_error-color {
        .kbq-empty-state-title {
            color: var(--kbq-empty-state-error-title);
        }

        .kbq-empty-state-text {
            color: var(--kbq-empty-state-error-color);
        }
    }
}

@mixin kbq-empty-state-typography() {
    .kbq-empty-state-title,
    .kbq-empty-state-text {
        text-align: center;
    }

    .kbq-empty-state_compact {
        .kbq-empty-state-title {
            @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
        }

        .kbq-empty-state-text {
            @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
        }
    }

    .kbq-empty-state_normal {
        .kbq-empty-state-title {
            @include kbq-typography-level-to-styles-css-variables(typography, subheading);
        }

        .kbq-empty-state-text {
            @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
        }
    }

    .kbq-empty-state_big {
        .kbq-empty-state-title {
            @include kbq-typography-level-to-styles-css-variables(typography, headline);
        }

        .kbq-empty-state-text {
            @include kbq-typography-level-to-styles-css-variables(typography, text-big);
        }
    }
}