@import '../../common/styles/text-base';
@import '../../common/styles/media/_screen';
@import '../../common/styles/colors';
@import '../../common/styles/_indent-variables';
@import '../../common/styles/_highlight-indent';

/* stylelint-disable hhru/less-variable-value-disallowed-list */

@color-form-indent: #e87471;

.bloko-form-separator {
    display: block;
    padding-top: @vertical-form-indent;
    .highlight-paddings(@vertical-form-indent, 0, #dde9aa, 'bloko-form-separator');
}

.bloko-form-item {
    @color-form-indent: #f7c4c7;

    margin: @vertical-form-indent 0;
    .highlight-margins(@vertical-form-indent, @vertical-form-indent, @color-form-indent, 'bloko-form-item', flex-start);

    @media @screen-gt-s {
        margin-top: 0;
        .highlight-margins(0, @vertical-form-indent, @color-form-indent, 'bloko-form-item', flex-start);
    }
}

// предотвращает схлопывание отступов
.bloko-form-item-group::before {
    display: block;
    content: '';
    height: 1px;
    margin-top: -1px;
}

.bloko-form-item-baseline {
    @color-form-indent: #7bbae6;

    margin: @vertical-form-indent-baseline 0;
    .highlight-margins(
        @vertical-form-indent-baseline,
        @vertical-form-indent-baseline,
        @color-form-indent,
        'bloko-form-item-baseline'
    );

    &:first-child {
        margin-top: var(--bloko-form-size-baseline-first);
    }

    @media @screen-gt-s {
        margin: @vertical-form-indent 0;

        .highlight-margins(
            @vertical-form-indent,
            @vertical-form-indent,
            @color-form-indent,
            'bloko-form-item-baseline'
        );
    }
}

.bloko-form-item-text {
    @color-form-indent: #ccc111;

    margin: @vertical-form-indent-baseline 0;
    .highlight-margins(
        @vertical-form-indent-baseline,
        @vertical-form-indent-baseline,
        @color-form-indent,
        'bloko-form-item-text'
    );

    @media @screen-gt-s {
        margin: @vertical-form-indent 0;

        .highlight-margins(
            @vertical-form-indent,
            @vertical-form-indent,
            @color-form-indent,
            'bloko-form-item-text'
        );
    }
}

.bloko-form-hint {
    color: @color-gray-50;
    margin-top: 6px;
    .bloko-text-small();
}

.bloko-form-legend {
    display: inline-block;
    margin: 0;
    .bloko-text-strong();

    @media @screen-gt-s {
        font-weight: normal;
        padding-top: @form-label-indent;
        padding-bottom: 0;
        .highlight-paddings(@form-label-indent, 0, @color-form-indent, 'bloko-form-legend');
    }
}

.bloko-form-legend_for-small {
    margin: 0;

    @media @screen-gt-s {
        padding-top: @form-label-indent-small;
        .highlight-paddings(@form-label-indent-small, 0, @color-form-indent, 'bloko-form-legend_for-small');
    }
}

.bloko-form-legend_for-large {
    margin: 0;

    @media @screen-gt-s {
        padding-top: @form-label-indent-large;
        .highlight-paddings(@form-label-indent-large, 0, @color-form-indent, 'bloko-form-legend_for-large');
    }
}

.bloko-form-spacer {
    display: inline-block;
    margin-left: 10px;

    @media @screen-lt-m {
        margin-left: 5px;
    }
}

.bloko-form-required {
    &::after {
        content: '\00a0*';
        color: @color-red-60;
    }
}

.bloko-form-error {
    color: @color-red-50;
    padding-bottom: @vertical-form-indent;
    .bloko-text-medium();
    .highlight-paddings(0, @vertical-form-indent, #9e9e9e, 'bloko-form-error', flex-start);
}

.bloko-form-error_hidden {
    display: none;
}

.bloko-form-error_entering {
    transition: height 0.1s, padding-bottom 0.1s;
    transition-timing-function: ease-out;
}

.bloko-form-error_exiting {
    transition: height 0.1s, padding-bottom 0.1s;
    transition-timing-function: ease-in;
}

.bloko-form-one-column {
    @media @screen-gt-s {
        .bloko-form-item {
            @color-form-indent: #f7c4c7;

            margin: @vertical-form-indent 0;
            .highlight-margins(
                @vertical-form-indent,
                @vertical-form-indent,
                @color-form-indent,
                'bloko-form-item',
                flex-start
            );
        }

        .bloko-form-item-baseline {
            @color-form-indent: #7bbae6;

            margin: @vertical-form-indent-baseline 0;
            .highlight-margins(
                @vertical-form-indent-baseline,
                @vertical-form-indent-baseline,
                @color-form-indent,
                'bloko-form-item-baseline'
            );
        }

        .bloko-form-legend {
            margin: 0;
            padding-top: 0;
            .bloko-text-strong();
            .highlight-paddings(0, 0, @color-form-indent, 'bloko-form-legend');
        }

        .bloko-form-spacer {
            margin-left: 10px;
        }
    }
}