@import "./base/var";
@import "./mixins/index.scss";

@include c(form) {
    @include m(horizontal) {
        @include ci(form-item) {
            &__content {
                position: relative;
            }
        }
    }
    @include m(vertical) {
        @include ci(form-item) {
            &__label {
                position: static;
            }
        }
    }
    @include m(inline) {
        @include ci(form-item) {
            display: inline-block;
            margin-right: 14px;
            vertical-align: top;
        }
    }
}

@include c(form-item) {
    display: block;
    margin-bottom: 24px;
    position: relative;
    font-size: $--font-size-default;
    &:after, &:before {
        content: '';
        display: table;
    }
    @include m(error) {
        @include ci(input) {
            &__source {
                border-color: $--color-danger !important;

                &:hover,
                &:focus,
                &:active {
                    border-color: $--color-danger !important;
                }

                &:focus {
                    box-shadow: 0 0 0 2px mix($--color-danger, $--color-white, $--button-hover-percent) !important;
                }
            }
        }
        @include ci(textarea) {
            &__source {
                border-color: $--color-danger !important;

                &:hover,
                &:focus,
                &:active {
                    border-color: $--color-danger !important;
                }

                &:focus {
                    box-shadow: 0 0 0 2px mix($--color-danger, $--color-white, $--button-hover-percent) !important;
                }
            }
        }
        @include ci(select) {
            &-reference {
                border-color: $--color-danger !important;
            }
            &-reference--focus {
                border-color: $--color-danger !important;
                box-shadow: 0 0 0 2px mix($--color-danger, $--color-white, $--button-hover-percent) !important;
            }
            &-reference--hover {
                border-color: $--color-danger !important;
            }
            //&__el-multiple{
            //  border-color: $--color-danger!important;
            //  &:hover,
            //  &:focus,
            //  &:active{
            //    border-color: $--color-danger!important;
            //  }
            //  &:focus{
            //    box-shadow: 0 0 0 2px mix($--color-danger, $--color-white, $--button-hover-percent)!important;
            //  }
            //}
            //
            //&__el-focus{
            //  border-color: $--color-danger!important;
            //  box-shadow: 0 0 0 2px mix($--color-danger, $--color-white, $--button-hover-percent)!important;
            //}
        }
    }

    @include e(error-tip) {
        color: $--color-danger;
        line-height: normal;
        position: absolute;
        top: 100%;
        padding-top: 2px;
    }

    @include e(content) {
        position: relative;
        line-height: 32px;
        font-size: 0;
    }

    @include e(error-tip) {
        font-size: $--font-size-default;
    }

    @include e(label) {
        vertical-align: middle;
        padding-right: 10px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        line-height: $--height-default;
    }
    @include e(label-icon) {
        color: $--color-danger;
        vertical-align: middle;
        margin-right: 5px;
        font-family: SimSun, sans-serif;
    }
    @include e(label-name) {
        line-height: 1;
    }
    @include e(label-name-colon) {
        &:after {
            content: ':';
            display: inline-block;
            margin-left: 2px;
        }
    }
    @include m(left) {
        @include e(label, false) {
            text-align: left;
        }
    }
    @include m(center) {
        @include e(label, false) {
            text-align: center;
        }
    }
    @include m(right) {
        @include e(label, false) {
            text-align: right;
        }
    }
}
