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

@mixin core() {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html,
    body {
        height: 100%;
        margin: 0;
    }

    body {
        @include tokens.kbq-typography-level-to-styles_css-variables(typography, text-normal);

        --ic-section-border-radius: 12px;
    }

    a {
        display: block;
        color: inherit;
        text-decoration: none;
        outline: none;
    }

    .ic-root {
        display: flex;
        flex-direction: column;
        height: 100%;
        color: var(--ic-theme-page-color);
        background-color: var(--ic-theme-page-background);
    }

    .cdk-overlay-container > .cdk-overlay-backdrop.cdk-overlay-backdrop-offset {
        top: 48px;
    }

    .ic-section {
        height: 100%;
        background: var(--ic-theme-section-background);
        border: 1px solid var(--ic-theme-section-border-color);
        border-radius: var(--ic-section-border-radius, 12px);
    }

    .ic-section-header {
        display: flex;
        align-items: center;
        height: 48px;
        min-height: 48px;

        .ic-section-header__auto-height {
            height: auto;
        }

        &.ic-section-header_with-border {
            border-bottom: 1px solid var(--ic-theme-section-border-color);
        }
    }

    /* контейнер с отступами для заголовка панели */
    .ic-section-header__title {
        @include tokens.kbq-typography-level-to-styles_css-variables(typography, caps-compact-strong);
        @include common.text-overflow();

        flex-grow: 1;
        padding: 0 var(--kbq-size-l);
        color: var(--kbq-foreground-contrast-secondary);
    }

    /* контейнер без отступов для кнопок */
    .ic-section-header__buttons {
        padding: 0 var(--kbq-size-s);
        @include common.flex(row, $items: center);
    }

    .ic-grid-footer {
        @include tokens.kbq-typography-level-to-styles_css-variables(typography, text-normal);
        @include common.flex(row, space-between, center);

        box-sizing: border-box;
        height: 40px;
        padding: var(--kbq-size-m) var(--kbq-size-l);
        color: var(--kbq-foreground-contrast);
        background: var(--ic-theme-grid-footer-background);
        border: 1px solid var(--ic-theme-grid-footer-border-color);
    }

    .ic-section {
        .ic-grid-footer {
            border-width: 1px 0 0;
        }
    }

    .ic-fw_1030 {
        width: 1030px;
        min-width: 1030px;

        .ic-action-bar {
            width: 1030px;
            min-width: 1030px;
        }
    }

    .ic-mh_600 {
        height: 100%;
        min-height: 600px;
    }

    textarea {
        resize: vertical;
    }
}