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

@mixin kbq-progress-bar-theme() {
    .kbq-progress-bar.kbq-theme {
        .kbq-progress-bar__inner {
            background-color: var(--kbq-progress-bar-bar-background);
        }

        .kbq-progress-bar__line {
            background-color: var(--kbq-progress-bar-bar-foreground);
        }
    }

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

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

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

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