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

$form-page-footer-height: 56px;

@mixin ic-form-page() {
    $parent-selector: &;

    @include common.flex(column, $items: center);
    @include common.container();

    flex: 1;
    background: var(--ic-theme-page-background);

    &__header {
        @include common.flex(row, flex-start, center);
        @include common.form-container;

        flex: 0 0 auto;
        min-height: var(--kbq-size-6xl);
        margin-bottom: var(--kbq-size-l);
    }

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

        color: var(--ic-theme-form-title-color);
    }

    &__content {
        @include common.flex(column);
        @include common.form-container;

        flex: 1;
        gap: var(--kbq-size-3xl);
        padding-bottom: calc(#{$form-page-footer-height} + #{var(--kbq-size-xl)});
    }

    &__section {
        display: flex;
        flex: none;
        flex-direction: column;
        padding: var(--ic-form-padding-vertical, var(--kbq-size-xxs)) var(--ic-form-padding-horizontal, 0);
        background: var(--ic-theme-form-section-background);
        border-color: 1px solid var(--ic-theme-form-section-border-color);
        border-radius: var(--ic-form-section-border-radius, 12px);

        &_disabled > #{$parent-selector}__section-title {
            margin-bottom: 0;
        }
    }

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

        margin-bottom: var(--kbq-size-xxl);
        padding: var(--kbq-size-xxs) 0;
        color: var(--ic-theme-form-section-title-color);
    }

    &__section-title.kbq-toggle.kbq-toggle_big {
        @include tokens.kbq-typography-level-to-styles_css-variables(typography, subheading);
    }

    &__section-title:has(+ .ic-form-page__section-description) {
        margin-bottom: 0;
    }

    &__section-description {
        color: var(--kbq-foreground-contrast-secondary);
        margin-bottom: var(--kbq-size-xxl);
    }

    &__footer {
        @include common.flex(row, center, center);

        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 99;
        width: 100%;
        min-height: $form-page-footer-height;
        background: var(--ic-theme-form-footer-background);
        border-top: 1px solid var(--ic-theme-form-footer-border-color);
    }

    &__footer-content {
        @include common.flex(row, flex-start);
        @include common.form-container;

        .kbq-button + .kbq-button {
            margin-left: var(--kbq-size-l);
        }
    }
}

@mixin core() {
    .mc-form-horizontal {
        margin-top: var(--kbq-size-xxl);
    }

    // TODO remove, use kbq-hint
    .mc-form-field_error {
        @include tokens.kbq-typography-level-to-styles_css-variables(typography, text-normal);

        margin-top: var(--kbq-size-xxs);
        color: var(--kbq-foreground-error);
    }

    .mc-form-label {
        text-align: left;
    }

    .mc-form-group {
        display: flex;
        flex-direction: column;
        margin-bottom: 16px;

        .mc-form-group_row {
            display: flex;
            flex-direction: row;
            margin-bottom: 20px;

            .mc-form-label {
                margin-bottom: 0;
                padding: var(--kbq-size-xs) var(--kbq-size-l) var(--kbq-size-xs) 0;
                text-align: right;
            }
        }
    }

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

        margin-top: var(--kbq-size-xxs);
    }

    .mc-form-label,
    .mc-form-control__text,
    fieldset[disabled] label {
        color: var(--kbq-foreground-contrast-secondary);
    }

    .mc-fieldset {
        margin: var(--kbq-size-xxs);
        padding: var(--kbq-size-3xl);

        > .mc-title {
            margin-bottom: var(--kbq-size-l);
        }
    }

    .form-input__short {
        width: 220px !important;
    }

    .ic-form-page {
        @include ic-form-page();
    }

    // deprecate
    .mc-page-form-footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        min-width: 1280px;
        padding: var(--kbq-size-l);
        background: var(--kbq-background-bg);
        border-top: 1px solid var(--kbq-line-contrast-less);

        .mc-page-form-footer__content {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            width: 1030px;
            padding: 0 var(--kbq-size-m);

            .kbq-button + .kbq-button {
                margin-left: var(--kbq-size-s);
            }
        }
    }
}