.half-fields {
    @extend .half-grids-xs;
}

.quarter-fields {
    @extend .quarter-grids-xs;
}

.quad-fields {
    @extend .quad-grids-xs;
}

.choose-group {
    > .choose {
        @extend .mar-10-r;
        &:last-child {
            margin-right: 0;
        }
    }
}

.field-group {
    @extend .mar-15-b;
    .choose {
        margin-bottom: 0;
    }
    &.warning {
        label {
            @extend .fc-warning;
        }
        input, select, textarea {
            @extend .fc-warning;
            border-color: $colorWarning;
        }
        .field-msg {
            @extend .fc-warning;
        }
    }
    &.info {
        label {
            @extend .fc-info;
        }
        input, select, textarea {
            @extend .fc-info;
            border-color: $colorInfo;
        }
        .field-msg {
            @extend .fc-info;
        }
    }
    &.success {
        label {
            @extend .fc-success;
        }
        input, select, textarea {
            @extend .fc-success;
            border-color: $colorSuccess;
        }
        .field-msg {
            @extend .fc-success;
        }
    }
    &.error {
        label {
            @extend .fc-danger;
        }
        input, select, textarea {
            @extend .fc-danger;
            border-color: $colorDanger;
        }
        .field-msg {
            @extend .fc-danger;
        }
    }
    > label {
        display: block;
        @extend .mar-5-b;
    }
    .input {
        + .field-msg {
            @extend .mar-5-t;
        }
    }
    .field-msg {
        display: block;
        padding-left: 2px;
    }
}

.field-msg {
    display: block;
    &.align-right {
        @extend .text-right;
    }
    &.align-left {
        @extend .text-left;
    }
}

.form-headbar {
    @extend .align-center-y;
    @extend .align-between-x;
    @include padding($gap-val, 25);
    @extend .mar-20-y;
    @extend .bg-white;
}

.form-container {
    @extend .pad-30;
    @extend .bg-white;
    border-radius: 4px;
    border: 1px solid $colorWhiteDarken;
    box-shadow: 3px 3px 15px rgba(#000, .1);
    > .form-headbar {
        @extend .mar-0-t;
        @extend .mar-45-b;
        @extend .pad-0;
        box-shadow: unset;
        border-radius: 0;
        h1, h2, h3, h4, h5 {
            @extend .relative;
            @extend .pad-10-b;
            &::before {
                content: '';
                height: 3px;
                width: 35%;
                @extend .bg-first;
                @extend .absolute;
                @extend .bottom-0;
                border-radius: 4px;
            }
        }
    }
}

.horrizontal-form {
    .field-group {
        @extend .align-start-y;
        margin-bottom: 20px;
        display: flex;
        > :not(label) {
            flex: 2;
            max-width: unset;
        }
        > label {
            flex: 1;
            margin-bottom: 0;
            padding-top: 2px;
        }
    }
    [class*="-grids-"] {
        .field-group {
            &:nth-child(odd) {
                margin-right: 5%;
            }
            &:nth-child(even) {
                margin-left: 5%;
            }
        }
    }
}


