@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixin';

@input-prefix-cls: ~'@{acud-prefix}-input';
@input-textarea-outer-prefix-cls: ~'@{acud-prefix}-input-textarea-outer';
@input-textarea-prefix-cls: ~'@{acud-prefix}-input-textarea';

@input-password-outer-prefix-cls: ~'@{acud-prefix}-input-password-outer';
@input-password-prefix-cls: ~'@{acud-prefix}-input-password';
@select-auto-complete-prefix-cls: ~'@{acud-prefix}-select-auto-complete';

@select-prefix-cls: ~'@{acud-prefix}-select';

// basic logic - line hight, font size
// content layer - 只处理文字 Icon， 没有开关config，对应四种交互状态配置
// background layer - 背景层 填色、描边、阴影，可以通过开关config配置， 对应四种交互状态

// 统一密码填充图形，chrome disc使用U+2022字符，IE&Firefox使用U+25CF字符
// 这两个字符差异较大，导致同一字体下disc大小也存在较大差异，chrome过小，通过font-size提大也将导致光标高度溢出
@font-face {
    font-weight: normal;
    font-family: password;
    font-style: normal;
    src: url(data:application/octet-stream;base64,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)
        format('woff2');
}

.@{input-prefix-cls} {
    .input();
    .@{iconfont-css-prefix} {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    &-real-password {
        input {
            // text-indent: .1em;
            padding-right: @space-5;
            font-weight: normal;
            font-family: password;
            font-style: normal;
            /* For safety - reset parent styles, that can break glyph codes*/
            font-variant: normal;
            /* Font smoothing. That was taken from TWBS */
            // -webkit-font-smoothing: antialiased;
            // -moz-osx-font-smoothing: grayscale; // 这两行不需要 加上placeholder 会闪动
            letter-spacing: 4px;
            text-transform: none;
        }

        ::-webkit-input-placeholder {
            .basic-tp-config(@input-placeholder-tp);
            letter-spacing: initial;
        }

        ::-moz-placeholder {
            .basic-tp-config(@input-placeholder-tp);
            letter-spacing: initial;
            .input-size( @input-font-size-md);
        }
        :-ms-input-placeholder {
            letter-spacing: initial;
            .input-size( @input-font-size-md);
        }
        // 浏览器默认填充背景色
        :-webkit-autofill {
            background-color: transparent;
            background-image: none;
            box-shadow: 0 0 0px 1000px transparent inset !important;
            transition: background-color 50000s ease-in-out 0s;
            -webkit-text-fill-color: @input-placeholder-tp !important;
        }
    }

    ::-webkit-input-placeholder {
        .basic-tp-config(@input-placeholder-tp);
    }

    :-moz-placeholder {
        .basic-tp-config(@input-placeholder-tp);
    }

    ::-moz-placeholder {
        .basic-tp-config(@input-placeholder-tp);
    }

    :-ms-input-placeholder {
        .basic-tp-config(@input-placeholder-tp);
    }

    .basic-config(@input-default-tp, @input-default-p);

    &[disabled],
    &[aria-disabled="true"] {
        &,
        &:hover,
        &:focus,
        &:active {
            color: @G4;
        }
    }

    &-span-focus {
        border-color: @B7;
        &:hover {
            border-color: @B7;
        }
    }

    &-warning {
        // .basic-config(@input-enhance-tp, @input-enhance-p);//测试说里面的文字不要红色
        .basic-p-config(@input-enhance-p);
    }

    &-suffix-limit-text {
        .basic-tp-config(@input-light-tp);
        padding-right: @padding-m;
    }

    &-suffix-warning {
        .basic-config(@input-enhance-tp, @input-enhance-p);
        color: @input-enhance-color;
        font-weight: @W2;
        font-size: @T2;
    }

    &-warning-text {
        margin-top: @padding-xsm;
        margin-bottom: 0;
        color: @input-enhance-color;
        font-size: @T2;
    }

    &-warning-popover-text {
        color: @input-popover-color;
    }

    &-tips {
        margin-top: @padding-xsm;
        margin-bottom: 0;
        font-size: @T2;
        .basic-tp-config(@input-tips-tp);
    }

    &-clear-wrapper {
        // width: @space-3;
        // height: @space-3;
        // line-height: @space-3;
        display: flex;
        margin-right: @padding-m;
        text-align: center;
        cursor: pointer;
        svg {
            .basic-tp-config(@input-clear-tp);
            pointer-events: all;
        }
    }

    &-label-input {
        height: auto;
        > input {
            display: none;
            height: auto;
        }
        .@{input-prefix-cls}-clear-wrapper {
            top: 4px;
        }
    }

    &-label-wrapper {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        // padding-bottom: @padding-xsm;
        width: 100%;
        height: 100%;
        min-height: 32px;
        line-height: @space-4;
        list-style: none;

        .@{input-prefix-cls}-label-item {
            display: flex;
            align-items: center;
            height: @space-4;
            margin: 0 2px;
            margin-top: @padding-xsm;
            margin-bottom: @padding-xsm;
            padding: 0 @padding-sm;
            list-style: none;
            border-radius: 2px;
            .basic-config(@input-label-tp, @input-label-p);
            &[disabled],
            &[aria-disabled="true"] {
                &,
                &:hover,
                &:focus,
                &:active {
                    color: @G4;
                    background-color: @G8;
                }
            }
            .@{input-prefix-cls}-label-text {
                display: inline-block;
                max-width: 95px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                vertical-align: top;
            }
            .@{input-prefix-cls}-label-clear-icon {
                width: 12px;
                height: 12px;
                margin-left: @padding-sm;
                cursor: pointer;
                .basic-tp-config(@input-clearLabel-tp);
            }
        }
        .@{input-prefix-cls}-label-input-box {
            display: inline-block;
            max-width: 100%;
            height: 24px;
            margin-top: @padding-xsm;
            margin-bottom: @padding-xsm;
            padding-left: @padding-m;
            margin-inline-start: 0;
            input {
                max-width: 100%;
                margin: 0;
                padding-right: 0;
                padding-left: 0;
                background: 0 0;
                border: none;
                outline: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
            }
        }
        .@{input-prefix-cls}-label-input-box-placeholder {
            width: 100%;
            input {
                width: 100%;
            }
        }
    }

    &-label-clear-wrapper {
        position: absolute;
        top: 2px;
        right: @padding-m;
        cursor: pointer;
        .basic-tp-config(@input-clearLabel-tp);
    }
}

.@{input-textarea-outer-prefix-cls} {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    max-width: 100%;
    font-size: @T2;

    &-icon-clear {
        position: absolute;
        top: @padding-xsm;
        right: @padding-md;
        width: @space-3;
        height: @space-3;
        margin-left: @padding-xsm;
        line-height: @space-4;
        text-align: center;
        cursor: pointer;
        .acudicon {
            vertical-align: -.3em;
        }
    }
}

.@{input-textarea-prefix-cls} {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    padding-top: 1.5 * @padding-xsm;
    padding-right: 2 * @padding-m;
    padding-bottom: 6 * @padding-xsm;
    padding-left: @padding-m;
    overflow: auto; /* 为了在其他浏览器中生效 */
    font-size: @T2;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro SC', 'SF Pro Text',
        'Helvetica Neue', Helvetica, 'PingFang SC', Roboto, 'Arial',
        'microsoft yahei ui', 'Microsoft YaHei', SimSun, sans-serif;
    // min-height: 100px;
    border: 1px solid;
    border-radius: @input-border-lg-radius;

    scrollbar-width: thin; /* Firefox支持 */
    scrollbar-color: transparent transparent; /* Firefox支持 */

    &::-webkit-input-placeholder {
        color: @G6;
        font-size: @T2;
        .basic-tp-config(@input-placeholder-tp);
    }

    &:-moz-placeholder {
        color: @G6;
    }

    &::-moz-placeholder {
        .basic-tp-config(@input-placeholder-tp);
    }

    &:-ms-input-placeholder {
        color: @G6;
    }

    .basic-config(@input-default-tp, @input-default-p);

    &[disabled],
    &[aria-disabled="true"] {
        &,
        &:hover,
        &:focus,
        &:active {
            color: @G4;
        }
    }
    &-span-focus {
        border-color: @B7;
    }
    &:focus {
        outline: none;
    }

    &-error {
        .basic-p-config(@input-enhance-p);
    }

    &-warning {
        color: @input-enhance-color;
    }
    &-autosize {
        min-height: 32px;
    }
    &-limit-box {
        color: @G5;
        .basic-p-config(@input-enhance-p);
    }
    &-no-limit {
        padding-right: 2 * @padding-m + @padding-sm;
    }
    &-no-clear {
        padding-right: @padding-m;
    }
    &-readonly {
        color: @G4;
        background-color: @G10;
        cursor: not-allowed;
        pointer-events: none;
        &:focus {
            background-color: @G10;
            border-color: @G7;
        }
        &:hover {
            background-color: @G10;
            border-color: @G7;
        }
    }
    &-warning-popover-text {
        color: @input-popover-color;
    }

    &-limit-box {
        // display: flex;
        // justify-content: flex-end;
        // margin-top: 4px;
        // .basic-tp-config(@input-light-tp); // 计数器在外面 antd也是
        position: absolute;
        right: @padding-md;
        bottom: @padding-xsm;
        width: auto;
        height: auto;
        padding-right: @padding-xsm;
        padding-left: @padding-xsm;
        background-color: @G11;
        opacity: 0.9;
        .basic-p-config(@input-enhance-p);
    }

    &-limit-box-readonly {
        background-color: @G10;
        &:focus {
            background-color: @G10;
        }
        &:hover {
            background-color: @G10;
        }
    }

    &::-webkit-scrollbar {
        width: 6px; /* 设置滚动条宽度 */
    }
    &::-webkit-scrollbar-thumb {
        background: transparent;
        border-radius: 3px; /* 圆角边框 */
    }
    &:hover::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.5);
    }
    &::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.6);
    }
    &:-webkit-scrollbar-track {
        background: transparent;
        border-radius: 3px;
    }
    &:-webkit-scrollbar-button {
        display: none;
    }
}

.@{input-password-outer-prefix-cls} {
    position: relative;
    &-icon {
        position: absolute;
        top: 2px;
        right: @padding-m;
        bottom: 2px;
        z-index: 1;
        display: flex;
        align-items: center;
        cursor: pointer;
        .@{iconfont-css-prefix} {
            svg {
                fill: @G5;
            }
        }
    }
    // &-icon&-icon-sm {
    //     top: -2px;
    // }

    &-icon:hover {
        .@{iconfont-css-prefix} {
            svg {
                fill: @G4;
            }
        }
    }
    &-icon:active {
        .@{iconfont-css-prefix} {
            svg {
                fill: @G3;
            }
        }
    }
    &-icon-disabled {
        cursor: not-allowed;
        .@{iconfont-css-prefix} {
            svg {
                fill: @G7 !important;
            }
        }
    }
}

.@{acud-prefix}-input-select-tags {
    .@{acud-prefix}-select-clear {
        right: 12px;
    }
    .@{select-prefix-cls}-item-checkall {
        display: none !important;
    }
    .acud-checkbox-wrapper {
        display: none !important;
    }
    .@{select-prefix-cls}-item-option-selected:not(
            .acud-select-item-option-input-disabled
        ) {
        color: #2468f2 !important;
    }
}
.@{acud-prefix}-select-auto-complete {
    .@{acud-prefix}-select-selector {
        position: relative;
        display: flex;
        width: 100%;
        cursor: text;
    }
}
.@{select-auto-complete-prefix-cls} {
    display: block;
    width: 100%;
    &:not(.@{acud-prefix}-select-customize-input) {
        .@{acud-prefix}-select-selector {
            position: relative;
            background-color: #fff;
            border-radius: 2px;
            transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
            .@{acud-prefix}-select-selection-search {
                .@{acud-prefix}-select-selection-search-input {
                    margin: 0;
                    padding: 0;
                    background: 0 0;
                    border: none;
                    outline: none;
                    cursor: auto;
                    appearance: none;
                }
            }
        }
    }

    .@{select-prefix-cls}-selector {
        position: relative;
        display: flex;
        width: 100%;
        cursor: text;
        .@{select-prefix-cls}-selection-search {
            position: absolute;
            z-index: 2;
            inset: 0 12px;
            .@{select-prefix-cls}-selection-search-input {
                width: 100%;
            }
        }
        .@{select-prefix-cls}-selection-placeholder {
            z-index: 1;
            flex: 1;
            padding-right: 12px;
            padding-left: 12px;
            overflow: hidden;
            color: #bfbfbf;
            white-space: nowrap;
            text-overflow: ellipsis;
            transition: none;
            pointer-events: none;
        }
    }
}