@charset "UTF-8";

@import '../../next-core/lib/next.scss';
@import './scss/mixin.scss';
@import './scss/variable.scss';

#{$input-prefix} {
    & {
        @include box-sizing;
        @include inputBounding();

        width: 200px;
        border-spacing: 0;
        background-color: $input-color-bg;
        transition: all 0.3s ease-out;

        input {
            height: 100%;
            &[type="reset"],
            &[type="submit"] {
                -webkit-appearance: button; /* 2 */
                cursor: pointer; /* 3 */
            }
            &::-moz-focus-inner {
                border: 0;
                padding: 0;
            }
            /* 去除autofill黄色背景 */
            &:-webkit-autofill {
                -webkit-box-shadow: 0 0 0 1000px $input-color-bg inset;
            }
        }
        textarea {
            resize: none;
        }

        input, textarea {
            width: 100%;
            border: none;
            outline: none;
            padding: 0;

            font-weight: normal;
            vertical-align: baseline;
            background-color: transparent;

            @include inputPlaceholder($input-color-hint);
            &::-ms-clear {
                display: none;
            }
        }

        &#{$input-prefix}-single {
            @include inputState(
                $input-single-color-border,
                $input-single-color-border-hover,
                $input-single-color-border-focus,
                $input-single-color-bg-hover,
                $input-single-color-bg-focus
            );
            input {
                color: $input-single-color;
            }
        }
        &#{$input-prefix}-multiple {
            @include inputState(
                $input-multiple-color-border,
                $input-multiple-color-border-hover,
                $input-multiple-color-border-focus,
                $input-multiple-color-bg-hover,
                $input-multiple-color-bg-focus
            );
            textarea {
                color: $input-multiple-color;
                padding: $input-multiple-size-padding-tb $input-multiple-size-padding-lr;
                font-size: $input-multiple-font-size;
                border-radius: $input-multiple-corner;
            }
            #{$input-prefix}-control {
                display: block;
                text-align: right;
                width: auto;
                border-radius: $input-multiple-corner;
            }
            #{$input-prefix}-len {
                padding-bottom: 4px;
            }
            border-radius: $input-multiple-corner;
            font-size: 0;
        }
        &-small {
            input {
                @include inputSize(
                    $input-size-s-height,
                    $input-size-s-margin,
                    $input-size-s-padding,
                    $input-size-s-font
                );
            }
            @include inputBorderRadius($input-size-s-corner);
            @include inputClearIconSize($input-clear-s-icon-size);
            @include inputFeedbackIconSize($input-feedback-icon-size-s);
        }
        &-medium {
            input {
                @include inputSize(
                    $input-size-m-height,
                    $input-size-m-margin,
                    $input-size-m-padding,
                    $input-size-m-font
                );
            }
            @include inputBorderRadius($input-size-m-corner);
            @include inputClearIconSize($input-clear-m-icon-size);
            @include inputFeedbackIconSize($input-feedback-icon-size-m);
        }
        &-large {
            input {
                @include inputSize(
                    $input-size-l-height,
                    $input-size-l-margin,
                    $input-size-l-padding,
                    $input-size-l-font
                );
            }
            @include inputBorderRadius($input-size-l-corner);
            @include inputClearIconSize($input-clear-l-icon-size);
            @include inputFeedbackIconSize($input-feedback-icon-size-l);
        }

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

        &.disabled {
            @include inputDisabled();
            #{$input-prefix}-len {
                color: $input-color-disabled;
            }
            background-color: $input-color-bg-disabled;

            input, textarea {
                &:disabled {
                    @include inputDisabled();
                }
            }

            .#{$css-prefix}icon-delete-filling {
                color: $input-color-disabled;
                &:hover {
                    color: $input-color-disabled;
                    cursor: not-allowed;
                }
            }
        }
        &.hidden {
            display: none;
        }
        &.noborder {
            border: none;
        }
    }

    &-control {
        display: table-cell;
        width: 1px;
        vertical-align: middle;
        padding-right: 4px;
        line-height: 100%;
        background-color: transparent;
        white-space: nowrap;

        #{$input-prefix}-len {
            font-size: $input-font-size-maxlen;
            line-height: $input-font-size-maxlen;
            color: $input-color-maxlen;
            padding-right: $s-1;

            display: table-cell;
            width: 1%;
            &.error {
                color: $input-color-maxlen-error;
            }
        }

        .#{$css-prefix}icon {
            display: table-cell;
            width: 1%;
            top: 0;
        }
        .#{$css-prefix}icon-success {
            color: $input-success-feedback-color;
        }

        .#{$css-prefix}icon-delete-filling {
            color: $input-clear-color;
            transition: all 0.3s ease-out;

            &:hover {
                color: $input-clear-hover-color;
                cursor: pointer;
            }
        }
    }

    &-group {
        @include box-sizing;
        @include global-font;

        display: inline-table;
        border-collapse: separate;
        border-spacing: 0;
        width: 240px;

        #{$input-prefix} {
            width: 100%;
            border-radius: 0;
        }

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

        #{$input-prefix}-addon {
            width: 1px;
            white-space: nowrap;

            @include inputAddonState(
                $input-addon-color,
                $input-addon-color-bg,
                $input-single-color-border
            );
            &:first-child {
                border-right: 0;
            }
            &:last-child {
                border-left: 0;
            }
        }

        &.small {
            #{$input-prefix}-addon {
                @include inputAddonSize(
                    $input-size-s-height,
                    $input-size-s-padding,
                    $input-size-s-font,
                    $input-size-s-corner
                );
            }
        }
        &.medium {
            #{$input-prefix}-addon {
                @include inputAddonSize(
                    $input-size-m-height,
                    $input-size-m-padding,
                    $input-size-m-font,
                    $input-size-m-corner
                );
            }
        }
        &.large {
            #{$input-prefix}-addon {
                @include inputAddonSize(
                    $input-size-l-height,
                    $input-size-l-padding,
                    $input-size-l-font,
                    $input-size-l-corner
                );
            }
        }
    }
}