@import './var.scss';
@import '../../Style/mixin/index.scss';

:root {
    --input-width: #{$input-width};
    --input-font-size: #{$input-font-size};
    --input-text-color: #{$input-text-color};
    --input-border-color: #{$input-border-color};
    --input-background-color: #{$input-background-color};
    --input-active-border-color: #{$input-active-border-color};
    --input-disabled-text-color: #{$input-disabled-text-color};
    --input-disabled-bg: #{$input-disabled-bg};
    --input-placeholder-text-color: #{$input-placeholder-text-color};
    --input-placeholder-font-size: #{$input-placeholder-font-size};
    --input-keyboard-height: #{$input-keyboard-height};
    --input-keyboard-sub-font-size: #{$input-keyboard-sub-font-size};
    --input-keyboard-sub-text-color: #{$input-keyboard-sub-text-color};
    --input-keyboard-cursor-height: #{$input-keyboard-cursor-height};
    --input-keyboard-cursor-bg: #{$input-keyboard-cursor-bg};
    --input-verify-font-size: #{$input-verify-font-size};
    --input-verify-text-color: #{$input-verify-text-color};
    --input-verify-active-color: #{$input-verify-active-color};
}

@mixin jing-input-placeholder {
    color: var(--input-placeholder-text-color) !important;
    font-size: var(--input-placeholder-font-size);
}

@mixin jing-input-common() {
    width: var(--input-width);
}

input::placeholder {
    @include jing-input-placeholder();
}

textarea::placeholder {
    @include jing-input-placeholder();
}

.jing-input {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    text-align: left;

    &--center {
        .jing-input__control {
            text-align: center;
        }
    }

    &--right {
        .jing-input__control {
            text-align: right;
        }
        .jing-input__clear {
            padding-right: 0;
        }
    }

    &::-webkit-input-placeholder {
        color: var(--input-placeholder-text-color);
    }

    &::placeholder {
        color: var(--input-placeholder-text-color);
    }

    &__control {
        display: block;
        box-sizing: border-box;
        flex: 1;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        font-size: var(--input-font-size);
        color: var(--input-text-color);
        line-height: inherit;
        text-align: inherit;
        background-color: var(--input-background-color);
        border: 0;
        resize: none;
        user-select: auto;
    }

    &:read-only {
        cursor: default;
    }

    // for ios wechat
    &[type='date'],
    &[type='time'],
    &[type='datetime-local'] {
        min-height: var(--cell-line-height);
    }

    &__clear {
        flex-shrink: 0;
        color: var(--input-clear-icon-color);
        // margin-right: calc(var(--padding-xs) * -1); 打包报错
        margin-right: -8px;
        padding: 0 var(--padding-xs);
        box-sizing: content-box;
        cursor: pointer;
    }

    &__prefix,
    &__suffix {
        @include flex-center();
    }
    &__prefix {
        padding-right: var(--padding-xs);
    }
    &__suffix {
        padding-left: var(--padding-xs);
    }
}

.jing-keyboardinput {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    &__control {
        position: relative;
        display: flex;
        overflow: hidden;
        flex: 1;
        width: 100%;
        height: var(--input-keyboard-height);
        line-height: var(--cell-line-height);
        padding: var(--cell-horizontal-padding) var(--cell-vertical-padding);
        color: var(--cell-text-color);
        font-size: var(--cell-font-size);
        background-color: var(--cell-bg);
        cursor: text;
        z-index: 2;
        background-color: rgba(255, 255, 255, 0);
        border: 1px solid transparent;

        &:after {
            visibility: hidden;
            content: '';
            width: 1px;
            height: var(--input-keyboard-cursor-height);
            background: var(--input-keyboard-cursor-bg);
            position: relative;
            top: 3px;
            left: 0;
            animation: 1s step-start infinite jqb-cursor-flicker;
        }
        &-active {
            &:after {
                visibility: visible;
            }
        }
    }
    sub {
        z-index: 1;
        display: block;
        position: absolute;
        left: 17px;
        top: 52%;
        transform: translate(0, -50%);
        height: 1em;
        line-height: 1em;
        font-size: var(--input-keyboard-sub-font-size);
        color: var(--input-keyboard-sub-text-color);
    }

    &__clear,
    &__focus {
        // display: flex;
        // justify-content: center;
        // align-items: center;
        // width: var(--input-width);
        @include flex-center();
        @include jing-input-common();
    }
}