@use '@koobiq/components/core/styles/common/tokens';

@mixin core() {
    $border-color: var(--kbq-line-contrast-less);

    body {
        --ic-action-bar-height: var(--kbq-size-5xl);
    }

    .ic-action-bar {
        position: relative;
        display: flex;
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        height: var(--ic-action-bar-height);
        padding: 0 var(--kbq-size-l);

        &__header {
            @include tokens.kbq-typography-level-to-styles_css-variables(typography, subheading);

            margin-right: var(--kbq-size-l);
            color: var(--kbq-foreground-contrast);
        }

        // use with kbq-divider component
        &__divider {
            height: 20px !important;
            margin: 0 var(--kbq-size-s) !important;
        }

        &_bordered {
            border-top: 1px solid $border-color;
            border-bottom: 1px solid $border-color;
        }

        &_underline {
            border-bottom: 1px solid $border-color;
        }

        &__left,
        &__right {
            display: flex;
            flex-direction: row;
            flex-shrink: 0;
            align-items: center;
            justify-content: flex-start;
            height: 100%;
        }

        &__right {
            justify-content: flex-end;
        }
    }

    .ic-section {
        .ic-action-bar {
            height: 44px;
        }
    }
}