@import './var.scss';

:root {
    --password-input-height: #{$password-input-height};
    --password-input-margin: #{$password-input-margin};
    --password-input-font-size: #{$password-input-font-size};
    --password-input-border-radius: #{$password-input-border-radius};
    --password-input-bg: #{$password-input-bg};
    --password-input-dot-size: #{$password-input-dot-size};
    --password-input-dot-color: #{$password-input-dot-color};
}

.jing-password-input {
    position: relative;
    margin: var(--password-input-margin);
    user-select: none;
    &__security {
        display: flex;
        width: 100%;
        height: var(--password-input-height);
        cursor: pointer;

        &::after {
            border-radius: var(--password-input-border-radius);
        }

        li {
            position: relative;
            display: flex;
            flex: 1;
            align-items: center;
            justify-content: center;
            height: 100%;
            font-size: var(--password-input-font-size);
            line-height: 1.2;
            background-color: var(--password-input-bg);
        }

        i {
            position: absolute;
            top: 50%;
            left: 50%;
            width: var(--password-input-dot-size);
            height: var(--password-input-dot-size);
            background-color: var(--password-input-dot-color);
            border-radius: 100%;
            transform: translate(-50%, -50%);
            visibility: hidden;
        }
    }

    &__cursor {
        position: absolute;
        top: 50%;
        left: 50%;
        width: var(--keyboard-cursor-width);
        height: var(--keyboard-cursor-height);
        background-color: var(--keyboard-cursor-color);
        transform: translate(-50%, -50%);
        animation: var(--keyboard-cursor-cursor-animation-duration)
            jing-cursor-flicker infinite;
    }

    input {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        display: block;
        width: 100%;
        height: 100%;
        color: transparent;
        text-indent: -999rem;
        background: transparent;
        border: none;
        outline: none;
        appearance: none;
        caret-color: transparent;
    }
}

@keyframes jing-cursor-flicker {
    from {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}