@import "../variables";
@import "../mixins";

$form_input_additive_offset: $offset_main;
$form_input_additive_width: $control_form_size + $form_input_additive_offset;
$form_item_percents_field_width: 100px;

.Form {
    &-horizontal {
        display: table;
    }
    &-horizontal-padded {
        margin-bottom: $offset_main * 2;
    }
}

/* stylelint-disable max-nesting-depth */

.Form-group-horizontal {
    align-items: flex-end;
    display: flex;

    & + & {
        margin-top: $offset_main;
    }

    &-up {
        align-items: flex-start;
    }
}

.Form-item {
    display: block;
    text-align: left;
    transition: $toggle_transition;

    &-standart {
        width: $form_item_standart_width;
    }

    &-error {
        color: $color_danger;
    }

    &-button {
        padding-top: $offset_main;
    }

    &-inline {
        display: inline-block;
        vertical-align: middle;
    }

    .Form-horizontal &,
    .Form-group-horizontal & {
        display: inline-block;
        vertical-align: bottom;

    }

    .Form-group + & {
        margin-top: $offset-main * 2;
    }

    & + & {
        margin-top: $offset-main;

        .Form-horizontal &,
        .Form-group-horizontal & {
            margin-left: $offset-main;
            margin-top: 0;
        }
    }

    &-right {
        flex-grow: 1;
    }

    &-icon {
        line-height: $control_height_normal;

        .Icon {
            vertical-align: middle;
        }
    }
}

.Form-item-tooltip {
    .Form-item + & {
        margin-left: 5px;
    }
}

.Form-item-submit-right {
    margin-left: auto;
    order: 999;
}

/* stylelint-enable max-nesting-depth */

.Form-input {
    width: 100%;

    .Form-item-error & {
        border-color: $color_danger;
    }
}

.Form-group-vertical {
    & + & {
        margin-top: $offset-main * 2;
    }
}

.Form-label {
    .Form-item-horizontal & {
        align-items: center;
        display: flex;
        flex-direction: row;
    }

    .Form-item-right & {
        text-align: right;
    }
}

.Form-label-caption {
    @include label;
    @include inline-middle;

    display: inline-block;

    font-size: $_font_size_label_medium;
    font-weight: $weight_bold;
    margin-bottom: $offset-main * .5;

    .Form-item-error & {
        color: $color_danger;
    }

    .Form-item-horizontal & {
        margin-bottom: 0;
        margin-right: $offset-main;
    }

    .Form-item-required &::after {
        content: "*";
        display: inline-block;
        margin-left: $offset_main * .5;
    }
}

/* stylelint-disable max-nesting-depth */
.Form-fieldset {
    border: 0 none;
    margin: 0;
    padding: 0;
    width: 100%;

    &-standart {
        width: $form_item_standart_width;
    }

    & + & {
        margin-top: $offset_main * 2;
    }

    &-morespace + &-morespace {
        margin-top: $offset_main * 3;
    }

    &-line-top {
        border-top: $border_main;
        padding-top: $offset_main * 2;
    }

    &-buttons {
        border-top: $border_main;
        margin-top: $offset_main * 2;
        padding-bottom: $offset_main * 2;
        padding-top: $offset_main * 2;
        text-align: right;
        white-space: nowrap;

        .Table + &,
        .Table-wrapper + & {
            border-top: 0 none;
            margin-top: 0;
        }
    }

    &-buttons-stick {
        margin-top: 0;
    }
}
/* stylelint-enable max-nesting-depth */

.Form-button-wrapper {
    @include inline-middle;
}

.Form-button-wrapper-delete {
    flex-grow: 1;
}

.Form-button {
    & + & {
        margin-left: $offset_main;
    }

    .Form-item-error & {
        border-color: $color_danger;
    }
}

.Form-button-left {
    float: left;
    & + & {
        margin-right: $offset_main;
    }
}

.Form-header-required-note {
    @include label(large);
}

.Form-header {
    margin-bottom: $offset_main;
    position: relative;
    width: 100%;
}

.Form-header-wrapper-required {
    text-align: right;
    white-space: nowrap;
}

.Form-error {
    color: $color_danger;
    font-size: $font_size_small;
    font-weight: $weight_book;
    &-inline {
        font-size: $font_size_default;
        margin-left: $offset_main;
    }
}

.Form-error-text-wrapper {
    display: none;
    line-height: $line_height_default;
    margin-top: $offset_main * .5;
    white-space: normal;

    .Form-item-error & {
        display: block;
    }
}

.Form-confirm-box {
    @include base-container;

    margin-top: $offset-main;
    padding-bottom: $offset-main * 3;
    padding-top: $offset-main * 3;
}

.Form-fieldset-caption {
    margin-bottom: $offset_main;
}

.Form-input-annotation {
    color: $color_text_label;
    display: block;
    line-height: $line_height_default;
    margin-top: $offset_main;
}

.Form-input-wrapper {
    display: block;
    position: relative;
}

.Form-item-description {
    display: inline-block;
    line-height: $control_height_normal;
    padding: 0 $offset_main;
}

.Form-group {

    &-with-control {
        display: flex;
        flex-direction: row;
    }

    .Form-item + & {
        margin-top: $offset_main;
    }

    .Form-item-checkbox {
        @include inline-middle;

        height: $control_height_normal;
    }
}

.Form-group-inputs-container {
    flex-grow: 1;
}

.Form-group-control-container {
    padding-top: $offset_main * 2;
}

.Form-group-control {
    display: inline-block;
    padding: $offset_main;
}

.Form-header-wrapper-required,
.Required-notice {
    @include label(large);

    position: absolute;
    right: 0;
    top: 0;
}

.Form-header-required-note,
.Required-notice {
    @include label(large);
}

.Required-notice {
    &::before {
        content: "* Required field";
    }
}

.Required-notice-wrapper {
    position: relative;
}

.Form-duration-field {
    width: $duration_field_width;
}

.Form-short-number-field {
    width: $short_number_field_width;
}

.Form-input-wrapper {
    &-compound {
        align-items: center;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }
}

.Form-input-additive,
.Form-input-conpound-part {
    padding-left: $form_input_additive_offset;
}

.Form-input-additive {
    width: $form_input_additive_width;
}

.Form-item-per-page-select {
    width: $per_page_select_width;
}

.Form-item-price-field {
    width: 200px;
}

.Form-input-wrapper-compound.Form-item-percents-field {
    width: $form_item_percents_field_width + $form_input_additive_width;
}

.Form-item-percents-field {
    width: $form_item_percents_field_width;

    &,
    .Form-error-text-wrapper {
        white-space: nowrap;
    }
}

.Form-item-publisher-field {
    width: $form_item_publisher_width;
}

.Form-item-now-view-field {
    width: $form_item_now_view_width;
}

.Form-col-container {
    display: flex;
}

.Form-col {
    & + & {
        margin-left: $offset_main * 3;
    }
}