@form-line-input-size: 250px;
@form-line-label-size: 250px;
@form-line-gap-size: 10px;
@form-line-padding-horizontal: 22px;
@form-line-padding-vertical: 15px;
@form-line-border-style: none;
@form-line-min-height: 44px;
@form-line-inner-padding: 13px 10px 11px 0;
@form-line-side-multidomain-change-resolution: 983px;
@form-line-side-multilanguage-change-resolution: 844px;

.form-line {
    .clearfix();
    position: relative;
    padding: @form-line-padding-vertical/2 @form-line-padding-horizontal/2;
    min-height: @form-line-min-height;

    border: @form-line-border-style;
    border-left-color: @color-border-darker;
    border-right-color: @color-border-darker;
    background: @color-f;

    @media @query-lg {
        padding: @form-line-padding-vertical @form-line-padding-horizontal;
    }

    &--no-top-border {
        border-top: none;
    }

    &--no-bottom-gap {
        padding-bottom: 0;
    }

    &--no-horizontal-gap {
        padding-left: 0;
        padding-right: 0;
    }

    & + .form-line,
    &__js + .form-line {
        border-top: 0;
    }

    &:last-child {
        border-bottom-color: @color-border-darker;
    }

    &__js {
        .form-line:first-child {
            border-top: none;
        }
    }

    &--disabled {
        background: url('@{path-design}/bg/disabled.png');
    }

    &--error {
        background: lighten(@color-red, 55%);
    }

    &--no-padd {
        padding: 0;
    }

    &--in-box {
        padding-left: 0;
        padding-right: 0;
    }

    .form-group & {
        &:first-child {
            padding-top: 10px;

            @media @query-lg {
                padding-top: 20px;
            }

            &.form-line--no-padd {
                padding-top: 0;
            }
        }

        &:last-child {
            padding-bottom: 10px;

            @media @query-lg {
                padding-bottom: 20px;
            }
        }
    }

    &__label {
        width: 100%;
        padding: @form-line-inner-padding;
        float: left;

        font-family: @font;
        font-size: 15px;
        font-weight: 700;
        color: @color-grey-middle;

        @media @query-lg {
            width: @form-line-label-size;
        }

        &--input {
            padding-top: 0;
            padding-bottom: 0;
        }

        &--with-count {
            height: @input-height;
        }

        // assign to category
        & + .form-error + .form-line {
            margin-top: 40px;
        }
    }

    &__compulsory {
        position: relative;
        top: -5px;
        z-index: 50;
    }

    &__error {
        position: absolute;
        top: calc(~"50% - @{form-error-icon-size}/2");
        left: -12px;

        .box-login & {
            top: 32px
        }
    }

    &__disabled {
        position: absolute;
        top: calc(~"50% - @{form-disabled-icon-size}/2");
        left: -12px;
        z-index: 60;
    }

    &__side {
        .clearfix();

        @media @query-xl {
            margin-left: @form-line-input-size;
        }

        & + .form-line__side {
            margin-top: 10px;

            &--multilanguage {
                @media only screen and (min-width: @form-line-side-multilanguage-change-resolution) {
                    margin-left: @form-line-label-size;
                }
            }

            &--multidomain {
                @media only screen and (min-width: @form-line-side-multidomain-change-resolution) {
                    margin-left: @form-line-label-size;
                }
            }

            .form-line__count {
                margin-left: 0;
            }
        }

        .table-grid & {
            margin-left: 0;
        }
    }

    &__item {
        display: inline-block;
        width: 100%;
        padding-right: @form-line-gap-size;
        position: relative;
        vertical-align: middle;
        word-break: break-all;

        @media @query-md {
            width: auto;
        }

        &--text {
            padding-top: 15px;
            padding-bottom: 14px;
        }

        &--button {
            padding-top: 5px;

            @media @query-lg {
                padding-top: 0;
                margin-top: -2px;
            }
        }

        &--info {
            position: absolute;
            top: 14px;

            @media @query-md {
                position: relative;
                top: 0;
            }

            .form-line__side & {
                width: auto;

                @media @query-md {
                    position: relative;
                    top: auto;
                    bottom: auto;
                    right: auto;
                }
            }

            .form-choice__info & {
                position: relative;
                top: 6px;
                right: auto;
                bottom: auto;
            }
        }

        &--info-baseline {
            position: absolute;
            left: calc(~"100% - 20px");
            bottom: 22px;
            width: 20px;
            padding-right: 0;

            @media only screen and (min-width: 392px) {
                left: @input-width + 20px;
            }

            @media @query-md {
                position: relative;
                bottom: auto;
                left: auto;
            }
        }

        &--btn {
            padding-top: 3px;
            padding-bottom: 3px;
        }

        &--alone {
            margin-top: 6px;
            margin-bottom: 6px;
            display: block;
        }

        &--right {
            float: right;
            padding-right: 0;
            padding-left: 0;
        }

        &--left {
            float: left;
            padding-right: 4px;
        }

        &--full-width {
            width: 100%;
        }

        &--fixed-width {
            width: 40px;

            text-align: center;
        }

        &--fixed-width-left {
            width: 40px;
            right: 22px;
            position: absolute;
            text-align: right;

            @media only screen and (min-width: 372px) {
                right: auto;
                left: @input-width - 50px;
            }

            @media @query-lg {
                position: relative;
                right: auto;
                left: auto;
                text-align: left;
            }

        }

        &--input-size {
            width: @form-line-input-size - @form-line-gap-size;
            height: 32px;
        }

        &__price {
            padding: @form-line-inner-padding;
            width: 80px;
            display: inline-block;
            vertical-align: middle;

            text-align: right;

            @media @query-md {
                width: 140px;
            }

            &__label-mobile {
                @media @query-xl {
                    display: none;
                }
            }
        }

        &__domain {
            display: flex;
            flex-direction: row;
            align-items: center;
            min-height: @form-line-min-height;

            &__image {
                position: relative;
                line-height: @form-line-min-height;
            }

            &__name {
                line-height: @form-line-min-height;
            }
        }
    }

    &__count {
        display: inline-block;
        margin-top: 5px;
        width: 100%;

        @media only screen and (min-width: @form-line-side-multidomain-change-resolution) {
            margin-left: @form-line-label-size;
            width: auto;
        }

        @media @query-xl {
            margin-left: 0;
        }

        &__val {
            display: table-cell;
            vertical-align: middle;
            padding-right: 7px;

            span {
                display: inline-block;
                padding: 3px 7px;
                line-height: 16px;

                font-size: 12px;
                text-align: center;
                color: @color-hint;
                background: @bg-input-icon;
            }
        }

        &__desc {
            display: table-cell;
            vertical-align: middle;
            line-height: 12px;

            font-size: 12px;
            color: @color-hint;
            font-style: italic;
        }
    }

    &__line {
        clear: left;
        margin-top: 10px;

        &--no-space {
            margin-top: 0;
        }
    }

    &__group {
        .clearfix();
        padding: 14px;

        background: @bg-info;
        border: 1px solid @color-border-light;
        border-radius: @radius @radius 0 0;

        &__image {
            float: left;
            width: 46px;
            height: 26px;
            position: relative;
            margin-right: 10px;

            text-align: center;

            img {
                .center-image();
            }
        }

        &__name {
            line-height: 26px;

            font-weight: 700;
        }
    }

    &__friendly-url {
        display: flex;
        flex-direction: column;

        @media @query-md {
            flex-direction: row;
        }

        &__domain {
            display: flex;
            flex-direction: row;

            .form-line__side {
                width: 90%;
                margin-left: 0;
            }
        }

        &__divider {
            line-height: @input-height;
            height: @input-height;
            padding-right: 5px;
            width: 30px;
            text-align: center;
        }

        &__input {
            display: flex;
            flex-direction: row;

            .input {
                width: 90%;
                margin-top: 5px;
                margin-right: 5px;

                @media @query-md {
                    margin-top: 0;
                }
            }
        }
    }
}