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

@mixin kbq-progress-spinner-theme() {
    .kbq-progress-spinner {
        --stroke: var(--kbq-progress-spinner-circle-background);

        .kbq-progress-spinner__circle {
            stroke: var(--stroke);
        }

        &.kbq-contrast {
            --stroke: var(--kbq-progress-spinner-circle-contrast-background);
        }

        &.kbq-contrast-fade {
            --stroke: var(--kbq-progress-spinner-circle-contrast-fade-background);
        }
    }

    .kbq-progress-spinner-text {
        color: var(--kbq-progress-spinner-text-color);
    }

    .kbq-progress-spinner-caption {
        color: var(--kbq-progress-spinner-caption-color);
    }
}

@mixin kbq-progress-spinner-typography() {
    .kbq-progress-spinner-text {
        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
    }

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