@import "mixins/mixins";
@import "mixins/utils";
@import "common/var";

.obelisk-form {
    .focus-form-label-left .focus-form-item-label {
        text-align: left;
    }
    .focus-form-label-top .focus-form-item-label {
        float: none;
        display: inline-block;
        text-align: left;
        padding: 0 0 10px 0;
    }

    .focus-form-inline {
        & .focus-form-item {
            display: inline-block;
            margin-right: 10px;
            vertical-align: top;
        }
        & .focus-form-item-label {
            float: none;
            display: inline-block;
        }
        & .focus-form-item-content {
            display: inline-block;
            vertical-align: top;
        }
        &.focus-form-label-top .focus-form-item-content {
            display: block;
        }
    }
}

.focus-form-item {
    margin-bottom: 22px;
    @include utils-clearfix;

    & .focus-form-item {
        margin-bottom: 0;
    }

    & .focus-input-validate-icon {
        display: none;
    }

    //@include m(medium) {
    //    .el-form-item__label {
    //        line-height: 36px;
    //    }
    //    .el-form-item__content {
    //        line-height: 36px;
    //    }
    //}
    //@include m(small) {
    //    .el-form-item__label {
    //        line-height: 32px;
    //    }
    //    .el-form-item__content {
    //        line-height: 32px;
    //    }
    //    &.el-form-item {
    //        margin-bottom: 18px;
    //    }
    //    .el-form-item__error {
    //        padding-top: 2px;
    //    }
    //}
    //@include m(mini) {
    //    .el-form-item__label {
    //        line-height: 28px;
    //    }
    //    .el-form-item__content {
    //        line-height: 28px;
    //    }
    //    &.el-form-item {
    //        margin-bottom: 18px;
    //    }
    //    .el-form-item__error {
    //        padding-top: 1px;
    //    }
    //}

    .focus-form-item-label {
        text-align: right;
        vertical-align: middle;
        float: left;
        font-size: 14px;
        color: $--color-text-regular;
        line-height: 40px;
        padding: 0 12px 0 0;
        box-sizing: border-box;
    }
    .focus-form-item-content {
        line-height: 40px;
        position: relative;
        font-size: 14px;
        @include utils-clearfix;
    }
    .focus-form-item-error {
        color: $--color-danger;
        font-size: 12px;
        line-height: 1;
        padding-top: 4px;
        position: absolute;
        top: 100%;
        left: 0;

        .error-inline {
            position: relative;
            top: auto;
            left: auto;
            display: inline-block;
            margin-left: 10px;
        }
    }

    @include when(required) {
        .focus-form-item-label:before {
            content: '*';
            color: $--color-danger;
            margin-right: 4px;
        }
    }

    @include when(error) {
        & .text-item.focus-input{
            .input-text {
                &, &:focus {
                    border-color: $--color-danger;
                }
            }
        }

        & .input-textarea {
            &, &:focus {
                border-color: $--color-danger;
            }
        }

        & .focus-input-append,
        & .focus-input-prepend {
            & .input-text {
                border-color: transparent;
            }
        }
        .focus-input-validate-icon {
            color: $--color-danger;
        }
    }
    //@include when(success) {
    //    & .el-input__inner,
    //    & .el-textarea__inner {
    //        &, &:focus {
    //            border-color: $--color-success;
    //        }
    //    }
    //    & .el-input-group__append,
    //    & .el-input-group__prepend {
    //        & .el-input__inner {
    //            border-color: transparent;
    //        }
    //    }
    //    .el-input__validateIcon {
    //        color: $--color-success;
    //    }
    //}
    .focus-form-item-feedback {
        .focus-input-validate-icon {
            display: inline-block;
        }
    }
}