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

@mixin kbq-sidepanel-theme() {
    .kbq-sidepanel-title {
        color: var(--kbq-sidepanel-header-text-color);
    }

    .kbq-sidepanel-content {
        background-color: var(--kbq-sidepanel-container-background);
        color: var(--kbq-sidepanel-content-text-color);
    }

    .kbq-sidepanel-container_shadowed {
        .kbq-sidepanel-content {
            box-shadow: var(--kbq-sidepanel-container-shadow);
        }
    }

    .kbq-overlay-dark-backdrop {
        background: var(--kbq-background-overlay) !important;
    }
}

@mixin kbq-sidepanel-typography() {
    .kbq-sidepanel-title {
        @include kbq-typography-level-to-styles-css-variables(typography, title);
    }

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