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

@mixin kbq-popover-theme() {
    .kbq-popover {
        box-shadow: var(--kbq-popover-container-shadow);

        &.kbq-popover_arrowless {
            box-shadow: var(--kbq-popover-container-shadow);
        }
    }

    .kbq-popover__container {
        background: var(--kbq-popover-container-background);
    }

    .kbq-popover__arrow {
        box-shadow: var(--kbq-popover-container-shadow);
        background: var(--kbq-popover-container-background);
    }

    .kbq-popover__close.kbq-popover__close_background-overlay-inverse {
        background-color: var(--kbq-background-overlay-inverse);
    }

    .kbq-popover__header {
        color: var(--kbq-popover-header-text-color);
    }

    .kbq-popover__content {
        color: var(--kbq-popover-content-text-color);
    }
}

@mixin kbq-popover-typography() {
    .kbq-popover__header {
        @include kbq-typography-level-to-styles-css-variables(typography, subheading);
    }

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