@import "../mixins";

$evo-form-gap-hor: 24px;
$evo-form-gap-ver: 32px;
$evo-form-min-field-width: 100px;

.evo-form-popover {
    display: inline-block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-left: 8px;
    color: $color-text;
    font-weight: normal;
    font-size: 14px;
    line-height: 22px;

    evo-icon {
        display: block;
        width: inherit;
        height: inherit;
        fill: $color-icon-dark;
    }
}

.evo-form-col {
    @media (max-width: $media-mobile) {
        &:not(&_multi) {
            flex: 0 1 auto;
        }

        &:not(&_size-1):not(&_size-2) {
            width: 100%;
            max-width: 100%;
        }
    }

    &__static-value {
        display: block;
        font-size: 16px;
        line-height: 24px;
    }

    /**
     Use it in case if you need to wrap several controls into single column.

     You can use single .evo-form__note for these wrapped controls.

     Example:

     <div class="evo-form-col evo-form-col_size-6">
        <div class="evo-form-col evo-form-col_multi">
            <evo-control-label class="evo-form-col evo-form-col_size-3" label="Электронная почта">
                <evo-input></evo-input>
            </evo-control-label>
            <evo-control-label class="evo-form-col evo-form-col_size-3" label="Повторите электронную почту">
                <evo-input></evo-input>
            </evo-control-label>
        </div>
        <div class="evo-form__note">На указанную почту будут отправлены данные для работы c системой Goods</div>
    </div>

     */
    &_multi {
        display: flex;
        flex: 1 1;
        flex-flow: row wrap;
        margin: (-$evo-form-gap-ver) (-$evo-form-gap-hor) 0 0;

        .evo-form-col {
            margin: ($evo-form-gap-ver) ($evo-form-gap-hor) 0 0;
        }

        @media (max-width: $media-mobile) {
            flex-flow: column nowrap;
        }
    }

    /* minimal control size*/
    &_size-1 {
        flex: 0 0 $evo-form-min-field-width;
        min-width: $evo-form-min-field-width;
        max-width: $evo-form-min-field-width;
    }

    /* 2-col field*/
    &_size-2 {
        flex: 0 0 196px;
        max-width: 196px;
    }

    /* 3-col field*/
    &_size-3 {
        flex: 0 1 306px;
        max-width: 308px;
    }

    /* 4-col field*/
    &_size-4 {
        flex: 0 1 416px;
        max-width: 418px;
    }

    /* 5-col field*/
    &_size-5 {
        flex: 0 1 526px;
        max-width: 526px;
    }

    /* 6-col field*/
    &_size-6 {
        flex: 0 1 636px;
        max-width: 636px;
    }

    /* 7-col field*/
    &_size-7 {
        flex: 0 1 746px;
        max-width: 746px;
    }

    /* 8-col field, maximal*/
    &_size-8 {
        flex: 0 1 856px;
        max-width: 856px;
    }

    &_size-shrink {
        flex: 0 1;
    }

    &_size-grow {
        flex: 1 1;
    }
}

.evo-form-row {
    position: relative;
    display: flex;
    flex-flow: row wrap;

    @media (max-width: $media-mobile) {
        flex-flow: column nowrap;
    }

    .evo-form-col:not(.evo-form-col_multi) {
        margin: ($evo-form-gap-ver) ($evo-form-gap-hor) 0 0;

        @media (max-width: $media-mobile) {
            margin: ($evo-form-gap-ver) 0 0 0;
        }
    }
}

.evo-form-section {
    display: flex;
    flex-direction: column;

    &__title {
        display: flex;
        align-items: center;
        @include h2();
        margin-bottom: 24px;
        font-weight: 700;

        .evo-form-popover {
            flex: 0 0 24px;
            width: 24px;
            height: 24px;
            margin-left: 16px;
        }
    }

    &__subtitle {
        @include h4();
        margin-bottom: 16px;
        font-weight: 700;
    }

    .evo-form-row {
        margin: (-$evo-form-gap-ver) (-$evo-form-gap-hor) 0 0;

        @media (max-width: $media-mobile) {
            margin: (-$evo-form-gap-ver) 0 0 0;
        }
    }

    .evo-form-row + .evo-form-row {
        margin-top: 0;
    }

    &_actions {
        display: block;
        padding-top: 0;
        padding-bottom: $evo-form-gap-ver;
        border-top: solid 1px $color-disabled;

        .evo-form-row, .evo-form-col {
            margin: 0;
        }

        .evo-form-row + .evo-form-row {
            margin-top: $evo-form-gap-ver;
        }

        .evo-form__note {
            margin: 0;
        }

        .evo-form__button {
            margin-top: $evo-form-gap-ver;
            margin-right: $evo-form-gap-hor;

            &_end {
                margin-right: 0;
                margin-left: auto;
            }

            @media (max-width: $media-mobile) {
                margin: $evo-form-gap-ver 0 0 0;
            }
        }
    }

    .evo-form-row + &__subtitle {
        margin-top: $evo-form-gap-ver;
    }
}

.evo-form {
    display: flex;
    flex-direction: column;
    margin-bottom: 40px;

    .evo-form-section + .evo-form-section {
        margin-top: 64px;
    }

    &__note {
        width: 100%;
        margin-top: 8px;
        color: $color-text-grey;
        font-style: italic;
    }

    &__error-message {
        align-items: center;
        color: $color-error;
        font-style: italic;
    }

    &__button {
        margin-top: $evo-form-gap-ver;
        margin-right: $evo-form-gap-hor;

        &_end {
            margin-right: 0;
            margin-left: auto;
        }

        @media (max-width: $media-mobile) {
            margin: $evo-form-gap-ver 0 0 0;
        }
    }

    evo-control-label {
        evo-input,
        evo-select,
        evo-autocomplete {
            width: 100%;
        }
    }
}
