/**
 * @file status style
 * @author chenqiang(chenqiang03)
 */

@import './index.less';

.@{form-item-prefix-cls} {
    // ================================================================
    // =                            Status                            =
    // ================================================================
    /* Some non-status related component style is in `components.less` */

    // ========================= Explain =========================
    /* To support leave along ErrorList. We add additional className to handle explain style */
    &-explain {
        // 由于节点变更存在滞后性，这个样式不能删除，否则校验由异常恢复时出现抖动
        display: none;

        &&-error {
            color: @form-error-color;
        }

        &&-warning {
            color: @form-warning-color;
        }
    }

    &-has-feedback {
        // ========================= Input =========================
        .@{acud-prefix}-input {
            padding-right: 24px;
        }
        .@{acud-prefix}-input-affix-wrapper {
            .@{acud-prefix}-input-suffix {
                padding-right: 18px;
            }
        }
        .@{acud-prefix}-input-search:not(.@{acud-prefix}-input-search-enter-button) {
            .@{acud-prefix}-input-suffix {
                right: 28px;
            }
        }

        // ======================== Switch =========================
        .@{acud-prefix}-switch {
            margin: 2px 0 4px;
        }

        // ======================== Select =========================
        // Fix overlapping between feedback icon and <Select>'s arrow.
        > .@{acud-prefix}-select .@{acud-prefix}-select-arrow,
        > .@{acud-prefix}-select .@{acud-prefix}-select-clear,
        :not(.@{acud-prefix}-input-group-addon) > .@{acud-prefix}-select .@{acud-prefix}-select-arrow,
        :not(.@{acud-prefix}-input-group-addon) > .@{acud-prefix}-select .@{acud-prefix}-select-clear {
            right: 32px;
        }

        > .@{acud-prefix}-select .@{acud-prefix}-select-selection-selected-value,
        :not(.@{acud-prefix}-input-group-addon)
            > .@{acud-prefix}-select
            .@{acud-prefix}-select-selection-selected-value {
            padding-right: 42px;
        }

        // ======================= Cascader ========================
        .@{acud-prefix}-cascader-picker {
            &-arrow {
                margin-right: 19px;
            }
            &-clear {
                right: 32px;
            }
        }

        // ======================== Picker =========================
        .@{acud-prefix}-picker {
            padding-right: @padding-sm + @T2 * 1.3;

            &-large {
                padding-right: @padding-m + @T2 * 1.3;
            }

            &-small {
                padding-right: @padding-xsm + @T2 * 1.3;
            }
        }

        // ===================== Status Group ======================
        &.@{form-item-prefix-cls} {
            &-has-success,
            &-has-warning,
            &-has-error,
            &-is-validating {
                // ====================== Icon ======================
                .@{form-item-prefix-cls}-children-icon {
                    position: absolute;
                    top: 50%;
                    right: 0;
                    z-index: 1;
                    width: @height;
                    height: 20px;
                    margin-top: -10px;
                    font-size: @T2;
                    line-height: 20px;
                    text-align: center;
                    visibility: visible;
                    animation: zoomIn 0.3s @ease-out-back;
                    pointer-events: none;
                }
            }
        }
    }

    // ======================== Success ========================
    &-has-success {
        &.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
            color: @form-success-color;
            animation-name: diffZoomIn1 !important;
        }
    }

    // ======================== Warning ========================
    &-has-warning {
        .form-control-validation(@form-warning-color; @form-warning-color; @form-warning-input-bg);

        &.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
            color: @form-warning-color;
            animation-name: diffZoomIn3 !important;
        }

        // Select
        .@{acud-prefix}-select:not(.@{acud-prefix}-select-disabled):not(.@{acud-prefix}-select-customize-input) {
            .@{acud-prefix}-select-selector {
                background-color: @form-warning-input-bg;
                border-color: @form-warning-color !important;
            }
            &.@{acud-prefix}-select-open .@{acud-prefix}-select-selector,
            &.@{acud-prefix}-select-focused .@{acud-prefix}-select-selector {
                .active(@form-warning-color);
            }
        }

        // InputNumber, TimePicker, InputTextarea
        .@{acud-prefix}-input-number,
        .@{acud-prefix}-picker,
        .@{acud-prefix}-input-textarea {
            background-color: @form-warning-input-bg;
            border-color: @form-warning-color;
            &-focused,
            &:focus {
                .active(@form-warning-color);
            }
            &:not([disabled]):hover {
                background-color: @form-warning-input-bg;
                border-color: @form-warning-color;
            }
        }

        .@{acud-prefix}-cascader-picker:focus .@{acud-prefix}-cascader-input {
            .active(@form-warning-color);
        }
    }

    // ========================= Error =========================
    &-has-error {
        .form-control-validation(@form-error-color; @form-error-color; @form-error-input-bg);

        .@{form-item-prefix-cls}-explain {
            display: block;

            &-error + .@{form-item-prefix-cls}-extra {
                display: none;
            }
        }

        &.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
            color: @form-error-color;
            animation-name: diffZoomIn2 !important;
        }

        // Select
        .@{acud-prefix}-select:not(.@{acud-prefix}-select-disabled):not(.@{acud-prefix}-select-customize-input) {
            .@{acud-prefix}-select-selector {
                background-color: @form-error-input-bg;
                border-color: @form-error-color !important;
            }
            &.@{acud-prefix}-select-open .@{acud-prefix}-select-selector,
            &.@{acud-prefix}-select-focused .@{acud-prefix}-select-selector {
                .active(@form-error-color);
            }
        }
        .@{acud-prefix}-input-group-addon .@{acud-prefix}-select {
            &.@{acud-prefix}-select-single:not(.@{acud-prefix}-select-customize-input)
                .@{acud-prefix}-select-selector {
                background-color: inherit;
                border: 0;
                box-shadow: none;
            }
        }

        .@{acud-prefix}-select.@{acud-prefix}-select-auto-complete {
            .@{acud-prefix}-input:focus {
                border-color: @form-error-color;
            }
        }

        // InputNumber, TimePicker, InputTextarea
        .@{acud-prefix}-input-number,
        .@{acud-prefix}-picker,
        .@{acud-prefix}-input-textarea {
            background-color: @form-error-input-bg;
            border-color: @form-error-color;
            &-focused,
            &:focus {
                .active(@form-error-color);
            }
            &:not([disabled]):hover {
                background-color: @form-error-input-bg;
                border-color: @form-error-color;
            }
        }

        .@{acud-prefix}-mention-wrapper {
            .@{acud-prefix}-mention-editor {
                &,
                &:not([disabled]):hover {
                    background-color: @form-error-input-bg;
                    border-color: @form-error-color;
                }
            }
            &.@{acud-prefix}-mention-active:not([disabled]) .@{acud-prefix}-mention-editor,
            .@{acud-prefix}-mention-editor:not([disabled]):focus {
                .active(@form-error-color);
            }
        }

        // cascader
        .@{acud-prefix}-cascader-picker {
            &:hover .@{acud-prefix}-cascader-picker-label:hover
                + .@{acud-prefix}-cascader-input.@{acud-prefix}-input {
                border-color: @form-error-color;
            }

            &:focus .@{acud-prefix}-cascader-input {
                background-color: @form-error-input-bg;
                .active(@form-error-color);
            }
        }

        // transfer
        .@{acud-prefix}-transfer {
            &-list {
                border-color: @form-error-color;
                &-search:not([disabled]) {
                    .basic-p-config(@form-input-p);
                }
            }
        }

        // RadioGroup
        .@{acud-prefix}-radio-button-wrapper {
            border-color: @form-error-color !important;

            &:not(:first-child) {
                &::before {
                    background-color: @form-error-color;
                }
            }
        }
    }

    &-with-extra-always-display {
        .@{form-item-prefix-cls}-explain-error + .@{form-item-prefix-cls}-extra {
            display: block;
        }
    }

    // ====================== Validating =======================
    &-is-validating {
        &.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
            display: inline-block;
            color: @primary-color;
        }
    }
}