@mixin input-clear {
    padding: px2rem(3px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

    svg {
        fill: $Form-input-iconColor;
        width: px2rem(10px);
        height: px2rem(10px);
    }

    &:hover svg {
        fill: darken($color: $Form-input-iconColor, $amount: 20%);
    }
}

@mixin input-text {
    position: relative;

    &.is-inline {
        display: inline-block;
    }

    &-input {
        display: flex;
        background-color: $Form-input-bg;
        border: $Form-input-borderWidth solid $Form-input-borderColor;
        border-radius: $Form-input-borderRadius;
        // height: $Form-input-height;
        line-height: $Form-input-lineHeight;
        padding: $Form-input-paddingY $Form-input-paddingX;
        font-size: $Form-input-fontSize;

        input {
            outline: none;
            background: transparent;
            border: none;
            color: $Form-input-color;
            width: 100%;
            height: $Form-input-lineHeight * $Form-input-fontSize;

            &::placeholder {
                color: $Form-input-placeholderColor;
                user-select: none;
            }
        }

        > input {
            flex-grow: 1;
        }
    }

    &.is-error > &-input {
        border-color: $Form-input-onError-borderColor;
        background-color: $Form-input-onError-bg;
    }

    &.is-focused > &-input {
        border-color: $Form-input-onFocused-borderColor;
        box-shadow: $Form-input-boxShadow;

        @if $Form-input-onFocused-bg !=$Form-input-bg {
            background-color: $Form-input-onFocused-bg;
        }
    }

    &.is-disabled > &-input {
        color: $text--muted-color;
        background: $Form-input-onDisabled-bg;
        border-color: $Form-input-onDisabled-borderColor;
    }

    &-spinner {
        line-height: $Form-input-lineHeight * $Form-input-fontSize;
    }

    &-clear {
        @include input-clear();
    }

    // 需要能撑开
    @include media-breakpoint-up(sm) {
        &.#{$ns}Form-control--sizeXs > &-input,
        &.#{$ns}Form-control--sizeSm > &-input,
        &.#{$ns}Form-control--sizeMd > &-input,
        &.#{$ns}Form-control--sizeLg > &-input {
            min-width: 100%;
            display: inline-flex;
        }
    }
}

.#{$ns}TextControl {
    @include input-text();

    &-placeholder {
        color: $Form-input-placeholderColor;
        user-select: none;
        position: absolute;
        left: $Form-input-paddingX;
        top: $Form-input-paddingY;
        margin-top: 2 * $Form-input-borderWidth;
        line-height: $Form-input-lineHeight;
    }

    &-valueWrap {
        flex-grow: 1;
        line-height: 1;
        white-space: nowrap;

        > input {
            display: inline-block;
            width: auto;
            vertical-align: middle;
        }
    }

    &--withAddOn {
        display: flex;
        flex-wrap: nowrap;

        @include media-breakpoint-up(sm) {
            &.#{$ns}Form-control--sizeXs,
            &.#{$ns}Form-control--sizeSm,
            &.#{$ns}Form-control--sizeMd,
            &.#{$ns}Form-control--sizeLg {
                display: inline-flex;

                > .#{$ns}TextControl-input {
                    min-width: unset;
                }
            }
        }
    }

    &--withAddOn > &-input {
        flex-basis: 1;
        flex-grow: 1;

        border-radius: 0;

        &:first-child {
            border-top-left-radius: $Form-input-borderRadius;
            border-bottom-left-radius: $Form-input-borderRadius;
        }

        &:last-child {
            border-top-right-radius: $Form-input-borderRadius;
            border-bottom-right-radius: $Form-input-borderRadius;
        }

        @if $Form-input-addOnDividerBorderWidth==0 {
            &:not(:last-child) {
                border-right-width: 0;
            }
        }
    }

    &--withAddOn > &-addOn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: px2rem(10px);
        padding-right: px2rem(10px);
        background: $Form-input-addOnBg;
        color: $Form-input-addOnColor;
        border-color: $Form-input-borderColor;
        border-style: solid;
        border-width: px2rem(1px) 0;

        &:first-child {
            border-left-width: px2rem(1px);
        }

        &:last-child {
            border-right-width: px2rem(1px);
            border-top-right-radius: $Form-input-borderRadius;
            border-bottom-right-radius: $Form-input-borderRadius;
        }
    }

    &--withAddOn > &-button {
        > .#{$ns}Button {
            position: relative;
            border-radius: 0;
            margin-left: px2rem(-1px);
            border: $InputGroup-button-borderWidth solid
                $InputGroup-button-borderColor;
        }

        &:not(:last-child) .#{$ns}Button {
            border-right: 0;
        }

        &:first-child .#{$ns}Button {
            @if $InputGroup-button-borderRadius {
                border-top-left-radius: $InputGroup-button-borderRadius;
                border-bottom-left-radius: $InputGroup-button-borderRadius;
            }
        }

        &:last-child .#{$ns}Button {
            @if $InputGroup-button-borderRadius {
                border-top-right-radius: $InputGroup-button-borderRadius;
                border-bottom-right-radius: $InputGroup-button-borderRadius;
            }
        }
    }

    &--withAddOn.is-focused > &-button .#{$ns}Button {
        border-color: $Form-input-onFocused-borderColor;
    }

    &--withAddOn.is-error > &-addOn {
        border-color: $Form-input-onError-borderColor;
    }

    &--withAddOn.is-focused > &-addOn {
        border-color: $Form-input-onFocused-borderColor;
        box-shadow: $Form-input-boxShadow;
    }

    &--withAddOn.is-disabled > &-addOn {
        color: $text--muted-color;
    }

    &-input--withAC {
        position: relative;
        flex-wrap: wrap;

        input {
            width: auto;
            color: $Form-input-placeholderColor;
        }
    }

    &-sugs {
        position: absolute;
        background: $Form-select-menu-bg;
        color: $Form-select-menu-color;
        border: $Form-input-borderWidth solid $Form-input-onFocused-borderColor;
        left: px2rem(-1px);
        right: px2rem(-1px);
        top: 100%;
        z-index: 1;
    }

    &-sugItem {
        padding: (
                $Form-selectOption-height - $Form-input-lineHeight *
                    $Form-input-fontSize - px2rem(2px)
            )/2 px2rem(12px);

        svg {
            width: px2rem(16px);
            margin-top: px2rem(4px);
            float: right;
            fill: darken($color: $Form-input-iconColor, $amount: 20%);
        }

        &:not(.is-disabled) {
            cursor: pointer;
        }

        &.is-highlight {
            color: $Form-select-menu-onHover-color;
            background: $Form-select-menu-onHover-bg;
        }
    }

    &-value {
        user-select: none;
        line-height: $Form-input-lineHeight * $Form-input-fontSize;
        vertical-align: middle;
        display: inline-block;
    }

    &-input--multiple {
        height: auto;
        min-height: $Form-input-height;
    }

    &-input--multiple &-valueWrap {
        white-space: normal;

        margin-bottom: -$gap-xs;

        > input {
            margin-bottom: $gap-xs;
        }
    }

    &-input--multiple &-value {
        line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px);
        font-size: $Form-selectValue-fontSize;
        color: $Form-selectValue-color;
        background: $Form-selectValue-bg;
        border: px2rem(1px) solid $Form-selectValue-borderColor;
        border-radius: px2rem(2px);
        margin-right: $gap-xs;
        margin-bottom: $gap-xs;
    }

    &-valueIcon {
        cursor: pointer;
        border-right: px2rem(1px) solid $Form-selectValue-borderColor;
        padding: 1px 5px;

        &:hover {
            background-color: darken($Form-selectValue-bg, 5%);
        }
    }

    &-input--multiple &-valueLabel {
        padding: 0 $gap-xs;
    }
}