@use '../../variables' as *;

$b: '.form';

#{$b} {
    position: relative;

    & + & {
        margin-top: 4px * 10;
    }

    .sidebar & {
        margin: 4px * 4;
    }

    .sidebar_l &,
    .sidebar_xl & {
        @media (--tablet-landscape-up) {
            margin-left: 4px * 6;
            margin-right: 4px * 6;
        }

        &:last-child {
            margin-bottom: 4px * 10;
        }
    }

    &_ajax {
    }

    &_captcha {
    }

    &_vertical {
    }

    &__group {
        display: flex;
        flex-direction: column;
        max-width: 4px * 96;
        width: 100%;

        @media (--tablet-landscape-up) {
            max-width: 4px * 146;
        }

        &:not(:first-of-type) {
            margin-top: 4px * 10;
        }

        &_fluid {
            max-width: none;
        }
    }

    &__group-title {
        color: $form-group-title-color;

        @include font($form-group-title-font);
    }

    &__item {
        display: flex;
        flex-direction: column;

        #{$b}:not(#{$b}_vertical) & {
            @media (--tablet-landscape-up) {
                align-items: flex-start;
                flex-direction: row;
            }
        }

        &:not(:first-child) {
            margin-top: 4px * 6;
        }

        &_value {
        }

        &_option-list {
        }

        &_submit {
        }

        &_toggle {
        }
    }

    &__label {
        color: $form-label-color;
        display: flex;
        margin-bottom: 4px * 2;

        @include font($form-label-font);

        @media (--tablet-landscape-up) {
            flex-shrink: 0;
            margin-bottom: 0;
            margin-right: 4px * 8;
            position: relative;
            top: 4px * 3;
            width: 4px * 46;
        }

        &:empty {
            @media (--tablet-portrait-down) {
                display: none;
            }
        }

        #{$b}_vertical & {
            @media (--tablet-landscape-up) {
                margin-bottom: 4px * 2;
                margin-right: 0;
                top: 0;
                width: auto;
            }
        }

        #{$b}__item_value & {
            @media (--tablet-landscape-up) {
                top: 0;
            }
        }

        #{$b}__item_option-list & {
            margin-bottom: 4px * 3;

            @media (--tablet-landscape-up) {
                margin-bottom: 0;
                top: 0;
            }

            #{$b}_vertical & {
                @media (--tablet-landscape-up) {
                    margin-bottom: 4px * 3;
                }
            }
        }

        #{$b}__item_submit & {
            @media (--tablet-portrait-down) {
                margin-bottom: 0;
                margin-top: 4px * 4;
                order: 2;
            }

            #{$b}_vertical & {
                @media (--tablet-landscape-up) {
                    margin-bottom: 0;
                    margin-top: 4px * 4;
                    order: 2;
                }
            }
        }

        #{$b}__item_toggle & {
            @media (--desktop-up) {
                top: 0;
            }
        }
    }

    &__required {
        color: $form-required-color;
        left: -4px;
        position: relative;
        top: 0;

        @include font($form-required-font);
    }

    &__help {
        display: inline-block;
        margin-left: 4px;
        transform: translateY(4px);
        transition-duration: var(--duration-micro-s);
        transition-property: fill;
        transition-timing-function: var(--easing-standard);

        #{$b}__group-title & {
            transform: none;
        }

        #{$b}__item_toggle & {
            margin-left: 4px * 2;
            transform: none;
        }
    }

    &__help-icon {
        display: block;
        fill: $form-help-icon-color;
        height: 4px * 5;
        width: 4px * 5;

        #{$b}__help:hover &,
        #{$b}__help:focus-visible & {
            fill: $form-help-icon-active-color;
        }

        #{$b}__item_toggle & {
            height: 4px * 6;
            width: 4px * 6;
        }
    }

    &__input-wrapper {
        @media (--tablet-landscape-up) {
            flex-grow: 1;
        }

        #{$b}__item_submit & {
            @media (--tablet-portrait-down) {
                display: flex;
                flex-direction: column;
                margin-top: 0;
                order: 1;
            }

            #{$b}_vertical & {
                @media (--tablet-landscape-up) {
                    display: flex;
                    flex-direction: column;
                    order: 1;
                }
            }
        }

        #{$b}__item_toggle & {
            align-items: center;
            display: flex;
        }
    }

    &__value {
        color: $form-value-color;
        display: block;
        overflow-wrap: break-word;

        @include font($form-value-font);
    }

    &__input {
        width: 100%;
    }

    &__input-error {
        color: $form-input-error-color;
        display: block;
        margin-top: 4px * 2;

        @include font($form-input-error-font);

        &:empty {
            display: none;
        }

        #{$b}__item_option-list & {
            margin-top: 4px * 4;
        }

        #{$b}__option & {
            margin-top: 4px;
        }
    }

    &__input-descr {
        color: $form-input-descr-color;
        display: block;
        margin-top: 4px * 2;

        @include font($form-input-descr-font);

        #{$b}__item_option-list & {
            margin-top: 4px * 4;
        }

        #{$b}__option & {
            margin-top: 4px;
        }

        #{$b}__input-error:not(:empty) + & {
            display: none;
        }
    }

    &__option {
        align-items: baseline;
        display: flex;
        justify-content: space-between;

        &:not(:first-child) {
            margin-top: 4px * 4;
        }

        &_extra {
            &:not(:first-child) {
                margin-top: 4px * 2;
            }
        }
    }

    &__link {
    }

    &__submit-descr {
        color: $form-submit-descr-color;
        text-align: center;
        width: 100%;

        @include font($form-submit-descr-font);

        @media (--tablet-landscape-up) {
            text-align: left;
        }
    }

    &__submit-wrapper {
        align-items: center;
        display: flex;
        flex-direction: column;

        @media (--tablet-portrait-down) {
            order: 2;
        }

        @media (--tablet-landscape-up) {
            flex-direction: row;
        }

        #{$b}_vertical & {
            @media (--tablet-landscape-up) {
                order: 2;
            }
        }
    }

    &__submit-button {
        flex-shrink: 0;

        &:not(:first-child) {
            margin-top: 4px * 4;

            @media (--tablet-landscape-up) {
                margin-left: 4px * 6;
                margin-top: 0;
            }
        }

        .dialog & {
            @media (--tablet-portrait-down) {
                max-width: none;
                width: 100%;
            }
        }
    }

    &__submit-error {
        background-color: $form-submit-error-bg;
        border-radius: $form-submit-error-radius;
        box-shadow: $form-submit-error-shadow;
        color: $form-submit-error-color;
        margin-bottom: 4px * 4;
        padding: $form-submit-error-padding;
        text-align: center;

        @include font($form-submit-error-mobile-font);
        @include dark-border;

        @media (--tablet-portrait-down) {
            order: 1;
        }

        @media (--tablet-landscape-up) {
            margin-bottom: 0;
            margin-top: 4px * 8;
            text-align: left;

            @include font($form-submit-error-desktop-font);
        }

        #{$b}_vertical & {
            @media (--tablet-landscape-up) {
                margin-bottom: 4px * 8;
                margin-top: 0;
                order: 1;
            }
        }

        &:first-child {
            margin-bottom: 0;

            @media (--tablet-landscape-up) {
                margin-top: 0;
            }

            #{$b}_vertical & {
                @media (--tablet-landscape-up) {
                    margin-bottom: 0;
                }
            }
        }
    }

    &__trigger {
    }

    &__captcha {
    }
}