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

.kbq-content-panel-header {
    display: flex;
    flex-direction: column;
    padding: var(--kbq-size-l) var(--kbq-content-panel-vertical-padding);

    .kbq-content-panel-header__wrapper {
        display: flex;
        justify-content: space-between;
    }

    .kbq-content-panel-header__actions {
        display: flex;
        justify-content: flex-end;
    }

    .kbq-content-panel-header__close-button {
        margin-left: var(--kbq-size-m);
    }

    .kbq-content-panel-header-title {
        @include tokens.kbq-typography-level-to-styles-css-variables(typography, title);
    }

    .kbq-content-panel-header-actions {
        display: flex;
        gap: var(--kbq-size-s);
    }
}