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

@mixin kbq-accordion-theme() {
    .kbq-accordion.cdk-keyboard-focused {
        & .kbq-accordion-item:focus-within {
            border-color: var(--kbq-accordion-item-states-focus-border-color);
        }
    }

    .kbq-accordion-item {
        background: var(--kbq-accordion-item-default-background);
        color: var(--kbq-accordion-item-default-text-color);

        & .kbq-accordion-trigger__icon {
            color: var(--kbq-accordion-item-default-icon-color);
        }
    }

    .kbq-accordion-trigger {
        width: 100%;
        background: transparent;
        border: none;
        outline: none;

        color: var(--kbq-accordion-item-default-text-color);

        &:hover:not([data-disabled='true']) {
            cursor: pointer;

            & .kbq-accordion-trigger__icon {
                color: var(--kbq-accordion-item-states-hover-icon-color);
            }
        }

        &[data-disabled='true'] {
            color: var(--kbq-accordion-item-states-disabled-text-color);

            & .kbq-accordion-trigger__icon {
                color: var(--kbq-accordion-item-states-disabled-icon-color) !important;
            }
        }
    }
}

@mixin kbq-accordion-typography() {
    .kbq-accordion-header,
    .kbq-accordion-trigger {
        @include kbq-typography-level-to-styles-css-variables(typography, text-big);
    }

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

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