@alifd/next/lib/input/main.scss

@charset "UTF-8";
@import '../core/index-noreset.scss';
@import 'scss/mixin';
@import 'scss/variable';

#{$input-prefix} {
    @include box-sizing;
    vertical-align: middle;

    input {
        height: 100%;

        &[type="reset"],
        &[type="submit"] {
            -webkit-appearance: button;
            cursor: pointer;
        }

        &::-moz-focus-inner {
            border: 0;
            padding: 0;
        }

        /* remove autoFill yellow background */
        &:-webkit-autofill {
            -webkit-box-shadow: 0 0 0 1000px $input-bg-color inset;
            border-radius: $form-element-large-corner; // 一般大中小 radius 都相等，目前还没见过不一样的
        }

        &[type="password"] {
            &::-ms-reveal {
                display: none;
            }
        }
    }

    textarea {
        resize: none;
    }

    input,
    textarea {
        width: 100%;
        border: none;
        outline: none;
        padding: 0;
        margin: 0;
        font-weight: normal;
        vertical-align: middle;
        background-color: transparent;
        color: $input-text-color;

        &::-ms-clear {
            display: none;
        }
    }

    display: inline-table;
    border-collapse: separate;
    font-size: 0;
    line-height: 1;
    width: 200px;
    border-spacing: 0;
    transition: all $motion-duration-immediately $motion-linear;

    border: $input-border-width solid $input-border-color;
    background-color: $input-bg-color;

    &.#{$css-prefix}small {
        @include input-size($form-element-small-height, $input-s-padding, $form-element-small-font-size, $input-s-label-padding-left, $input-s-icon-padding-right);
        @include input-icon-size($form-element-small-icon-size);
        @include input-border-radius($form-element-small-corner);
    }

    &.#{$css-prefix}medium {
        @include input-size($form-element-medium-height, $input-m-padding, $form-element-medium-font-size, $input-m-label-padding-left, $input-m-icon-padding-right);
        @include input-icon-size($form-element-medium-icon-size);
        @include input-border-radius($form-element-medium-corner);
    }

    &.#{$css-prefix}large {
        @include input-size($form-element-large-height, $input-l-padding, $form-element-large-font-size, $input-l-label-padding-left, $input-l-icon-padding-right);
        @include input-icon-size($form-element-large-icon-size);
        @include input-border-radius($form-element-large-corner);
    }

    &#{$input-prefix}-textarea {
        height: auto;

        textarea {
            color: $input-text-color;
            padding: $input-multiple-padding-tb $input-multiple-padding-lr;
            font-size: $input-multiple-font-size;
            border-radius: $input-multiple-corner;
        }

        &.#{$css-prefix}small textarea {
            font-size: $form-element-medium-font-size;
        }
        &.#{$css-prefix}large textarea {
            font-size: $form-element-large-font-size;
        }

        #{$input-prefix}-control {
            display: block;
            width: auto;
            border-radius: $input-multiple-corner;
        }

        #{$input-prefix}-len {
            padding: 0 $input-l-icon-padding-right 4px;
            display: block;
            text-align: right;
            width: auto;
        }
        border-radius: $input-multiple-corner;
        font-size: 0;
    }

    &-hint-wrap {
        color: $input-hint-color;
        position: relative;

        #{$input-prefix}-clear {
            opacity: 0;
            z-index: 1;
            position: absolute;
        }
        #{$input-prefix}-hint {
            opacity: 1;
        }
    }

    #{$input-prefix}-clear-icon, .#{$css-prefix}icon-eye, .#{$css-prefix}icon-eye-close {
        &:hover {
            cursor: pointer;
            color: $input-hint-hover-color;
        }
    }

    @mixin clear-icon-visible {
        opacity: 1;

        + #{$input-prefix}-hint {
            opacity: 0;
        }
    }

    #{$input-prefix}-hover-show {
        opacity: 0;
    }

    &:hover, &.#{$css-prefix}focus {
        border-color: $input-hover-border-color;
        background-color: $input-hover-bg-color;

        #{$input-prefix}-clear {
            @include clear-icon-visible;
        }

        #{$input-prefix}-hover-show {
            opacity: 1;
        }
    }

    #{$input-prefix}-clear:focus {
        @include clear-icon-visible;
    }

    &.#{$css-prefix}focus {
        border-color: $input-focus-border-color;
        background-color: $input-focus-bg-color;
        box-shadow: 0 0 0 $input-focus-shadow-spread $color-calculate-input-focus-shadow;
    }

    &.#{$css-prefix}warning {
        border-color: $input-feedback-warning-border-color;
        background-color: $input-feedback-warning-bg-color;

        &.#{$css-prefix}focus,
        &:hover {
            border-color: $input-feedback-warning-border-color;
        }

        &.#{$css-prefix}focus {
            box-shadow: 0 0 0 $input-focus-shadow-spread $color-calculate-input-feedback-warning-shadow;
        }
    }

    &.#{$css-prefix}error {
        border-color: $input-feedback-error-border-color;
        background-color: $input-feedback-error-bg-color;

        input, textarea {
            color: $input-feedback-error-color;
        }

        &.#{$css-prefix}focus,
        &:hover {
            border-color: $input-feedback-error-border-color;
        }

        &.#{$css-prefix}focus {
            box-shadow: 0 0 0 $input-focus-shadow-spread $color-calculate-input-feedback-error-shadow;
        }
    }

    &.#{$css-prefix}hidden {
        display: none;
    }

    &.#{$css-prefix}noborder {
        border: none;
        box-shadow: none;
    }

    &-control {
        #{$input-prefix}-len {
            font-size: $input-maxlen-font-size;
            line-height: $input-maxlen-font-size;
            color: $input-maxlen-color;
            display: table-cell;
            width: 1px;
            vertical-align: bottom;

            &.#{$css-prefix}error {
                color: $input-maxlen-error-color;
            }

            &.#{$css-prefix}warning {
                color: $input-maxlen-warning-color;
            }
        }

        > * {
            display: table-cell;
            width: 1%;
            top: 0;
        }

        > *:not(:last-child) {
            padding-right: $s-1;
        }

        .#{$css-prefix}icon {
            transition: all $motion-duration-immediately $motion-linear;
            color: $input-hint-color;
        }

        #{$input-prefix}-warning-icon {
            color: $input-feedback-warning-color;
            &::before {
                content: $input-feedback-warning-icon;
            }
        }
        #{$input-prefix}-success-icon {
            color: $input-feedback-success-color;
            &::before {
                content: $input-feedback-success-icon;
            }
        }
        #{$input-prefix}-loading-icon {
            color: $input-feedback-loading-color;
            &::before {
                content: $input-feedback-loading-icon;
                animation: loadingCircle 1s infinite linear;
            }
        }
        #{$input-prefix}-clear-icon {
            &::before {
                content: $input-feedback-clear-icon;
            }
        }
    }

    &-label, &-inner-text {
        color: $input-label-color;
    }

    input,
    textarea {
        @include input-placeholder($input-placeholder-color);
    }

    &.#{$css-prefix}disabled {
        @include input-disabled();

        input, textarea {
            -webkit-text-fill-color: $input-disabled-color;
            color: $input-disabled-color;
            @include input-placeholder($input-disabled-color);
        }

        #{$input-prefix}-label, #{$input-prefix}-inner-text {
            color: $input-disabled-color;
        }
        #{$input-prefix}-len {
            color: $input-disabled-color;
        }

        #{$input-prefix}-hint-wrap {
            #{$input-prefix}-clear {
                opacity: 0;
            }
            #{$input-prefix}-hint {
                opacity: 1;
            }

            color: $input-disabled-color;

            #{$input-prefix}-clear-icon:hover {
                cursor: not-allowed;
                color: $input-disabled-color;
            }
        }

        .#{$css-prefix}icon {
            color: $input-disabled-color;
        }
    }

    &-inner, &-control, &-label {
        display: table-cell;
        width: 1px;
        vertical-align: middle;
        line-height: 1;
        background-color: transparent;
        white-space: nowrap;
    }

    &-group {
        @include box-sizing;

        display: inline-table;
        border-collapse: separate;
        border-spacing: 0;
        line-height: 0;
        width: 100%;

        &-auto-width {
            width: 100%;
            border-radius: 0 !important;
        }

        > #{$input-prefix} {
            border-radius: 0;
            &.#{$css-prefix}focus {
                position: relative;
                z-index: 1;
            }
        }

        > #{$input-prefix}:first-child {
            &.#{$css-prefix}small {
                border-top-left-radius: $form-element-small-corner !important;
                border-bottom-left-radius: $form-element-small-corner !important;
            }

            &.#{$css-prefix}medium {
                border-top-left-radius: $form-element-medium-corner !important;
                border-bottom-left-radius: $form-element-medium-corner !important;
            }

            &.#{$css-prefix}large {
                border-top-left-radius: $form-element-large-corner !important;
                border-bottom-left-radius: $form-element-large-corner !important;
            }
        }
        > #{$input-prefix}:last-child {
            &.#{$css-prefix}small {
                border-top-right-radius: $form-element-small-corner !important;
                border-bottom-right-radius: $form-element-small-corner !important;
            }

            &.#{$css-prefix}medium {
                border-top-right-radius: $form-element-medium-corner !important;
                border-bottom-right-radius: $form-element-medium-corner !important;
            }

            &.#{$css-prefix}large {
                border-top-right-radius: $form-element-large-corner !important;
                border-bottom-right-radius: $form-element-large-corner !important;
            }
        }
    }
    &-group-addon {
        width: 1px;
        display: table-cell;
        vertical-align: middle;
        white-space: nowrap;

        /* stylelint-disable declaration-no-important */
        &:first-child {
            border-bottom-right-radius: 0 !important;
            border-top-right-radius: 0 !important;
            //TODO: removed in 2.x
            > * {
                margin-right: calc(0px - #{$input-border-width});
                border-bottom-right-radius: 0 !important;
                border-top-right-radius: 0 !important;
                &.#{$css-prefix}focus {
                    position: relative;
                    z-index: 1;
                }
                > #{$input-prefix} {
                    border-bottom-right-radius: 0 !important;
                    border-top-right-radius: 0 !important;
                }
                > #{$input-prefix}.#{$css-prefix}focus {
                    position: relative;
                    z-index: 1;
                }
            }
        }
        &:last-child {
            border-bottom-left-radius: 0 !important;
            border-top-left-radius: 0 !important;
            //TODO: removed in 2.x
            > * {
                margin-left: calc(0px - #{$input-border-width});
                border-bottom-left-radius: 0 !important;
                border-top-left-radius: 0 !important;
                > #{$input-prefix} {
                    border-bottom-left-radius: 0 !important;
                    border-top-left-radius: 0 !important;
                }
            }
        }
    }
    &-group-text {
        color: $input-addon-text-color;
        background-color: $input-addon-bg-color;
        text-align: center;
        border: $input-border-width solid $input-border-color;
        padding: 0 $input-addon-padding;

        &:first-child {
            border-right-width: 0;
        }
        &:last-child {
            border-left-width: 0;
        }

        &.#{$css-prefix}disabled {
            @include input-disabled();
        }

        &.#{$css-prefix}small {
            @include input-addon-size($form-element-small-font-size);
            border-radius: $form-element-small-corner;
        }

        &.#{$css-prefix}medium {
            @include input-addon-size($form-element-medium-font-size);
            border-radius: $form-element-medium-corner;
        }

        &.#{$css-prefix}large {
            @include input-addon-size($form-element-large-font-size);
            border-radius: $form-element-large-corner;
        }
    }
}

@import './rtl.scss';