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

@mixin kbq-timezone-option-theme() {
    .kbq-timezone-option__offset,
    .kbq-timezone-option__city {
        color: var(--kbq-timezone-option-text);
    }

    .kbq-timezone-option__cities {
        color: var(--kbq-timezone-option-caption);
    }

    .kbq-timezone-select__panel.kbq-select__panel .kbq-optgroup-label {
        color: var(--kbq-timezone-option-optgroup-label);
    }
}

@mixin kbq-timezone-option-typography() {
    .kbq-timezone-option__offset {
        @include kbq-typography-level-to-styles-css-variables(typography, tabular-normal);
    }

    .kbq-timezone-option__city {
        @include kbq-typography-level-to-styles-css-variables(typography, tabular-normal);
    }

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

    .kbq-timezone-select__panel.kbq-select__panel .kbq-optgroup-label {
        @include kbq-typography-level-to-styles-css-variables(typography, caps-compact-strong);
    }
}