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

@mixin core() {
    body {
        --ic-sidebar-header-height: var(--kbq-size-5xl);
    }

    .ic-sidebar-header {
        display: flex;
        flex-direction: row;
        flex-shrink: 0;
        align-items: center;
        justify-items: center;
        height: var(--ic-sidebar-header-height);
        min-height: var(--ic-sidebar-header-height);

        .ic-sidebar-toggle {
            display: flex;
            flex-shrink: 0;
            align-items: center;
            height: 100%;
            padding: 0 var(--kbq-size-s);
            cursor: pointer;

            &:hover {
                .kbq-icon {
                    color: var(--kbq-states-icon-contrast-fade-hover);
                }
            }
        }

        .ic-sidebar-header__content {
            @include common.flex(row, $content: space-between, $items: center);

            height: 100%;
            flex: 1;
        }

        .ic-sidebar-header__title {
            @include tokens.kbq-typography-level-to-styles_css-variables(typography, caps-compact-strong);
            @include common.text-overflow();

            &:not(.kbq-link) {
                color: var(--kbq-foreground-contrast-secondary);
            }

            .kbq-link {
                @include tokens.kbq-typography-level-to-styles_css-variables(typography, caps-compact-strong);
            }
        }
    }

    [kbq-sidebar-opened] {
        .ic-sidebar-header {
            border-bottom: 1px solid var(--kbq-line-contrast-less);
        }
    }

    .ic-sidebar-closed-text {
        @include tokens.kbq-typography-level-to-styles_css-variables(typography, subheading);

        display: inline-block;
        color: var(--kbq-foreground-contrast-secondary);
        white-space: nowrap;
        transform: translate(0, 100%) rotate(-90deg);
        transform-origin: 0 0;

        &::after {
            float: left;
            margin-top: 100%;
            content: '';
        }
    }

    [kbq-sidebar-closed] {
        display: flex;
        flex-direction: column;
        height: 100%;
        cursor: pointer;

        .ic-sidebar-header {
            flex-direction: column;
            height: 100%;
        }

        .ic-sidebar-toggle {
            height: 48px;
            max-height: 48px !important;
        }

        .ic-sidebar-header__title {
            padding: 0 0 8px;
            transform: rotate(180deg);
            writing-mode: vertical-lr;
        }
    }
}