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

@mixin kbq-datepicker-theme() {
    .kbq-datepicker__content {
        background: var(--kbq-datepicker-container-background);
        box-shadow: var(--kbq-datepicker-container-shadow);
    }

    .kbq-calendar__table-header {
        color: var(--kbq-datepicker-header-text);
    }

    .kbq-calendar__table-header-divider::after {
        background: var(--kbq-datepicker-header-divider);
    }

    .kbq-calendar__body-cell-content {
        background: var(--kbq-datepicker-grid-cell-default-background);
        color: var(--kbq-datepicker-grid-cell-default-text);

        &.kbq-calendar__body-today {
            background: var(--kbq-datepicker-grid-cell-today-background);
            color: var(--kbq-datepicker-grid-cell-today-text);
        }

        &:hover:not(.kbq-disabled) {
            background: var(--kbq-datepicker-grid-cell-states-hover-background);
        }

        &:active:not(.kbq-disabled) {
            background: var(--kbq-datepicker-grid-cell-states-active-background);
        }

        &.kbq-selected:not(.kbq-disabled) {
            background: var(--kbq-datepicker-grid-cell-states-selected-background);
            color: var(--kbq-datepicker-grid-cell-states-selected-text);

            &:hover {
                background: var(--kbq-datepicker-grid-cell-states-selected-hover-background);
            }
        }

        &.kbq-disabled {
            color: var(--kbq-states-foreground-disabled);
            background: var(--kbq-datepicker-grid-cell-states-disabled-background);
        }
    }
}

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

    .kbq-calendar__table-header th {
        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
    }
}