@import "shared/mixins-and-vars";

.enable-input-mask {

    @cursor-color: #000;
    @cursor-color--dark-mode: @dark-mode-white;
    @select-color: #b4d5fe;

    position: relative;
    display: inline-flex;
    white-space: break-spaces;

    &__input {
        color: transparent;

        .enable__is-dark-mode & {
            color: transparent;
        }

        &::selection {
            color: transparent;
        }
    }

    &__input,
    &__mask {
        font-family: "Helvetica", "Arial", sans-serif;
    }

    &__mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 0 3px;
        z-index: 1;
    }

    &__mask-pre-val,
    &__mask-mid-val,
    &__mask-post-val {
        display: inline-block;
    }

    &__input:focus + &__mask &__mask-post-val {
        &::before {
            content: "\00a0";
            display: inline-block;
            height: ~"calc(100% - 6px)";
            width: 1px;
            overflow: hidden;
            margin: 2px 0;
            background-color: @cursor-color;
            animation: blink 1.1s infinite steps(1, start);
            position: absolute;

            .enable__is-dark-mode & {
                background-color: @cursor-color--dark-mode;
                animation: blink-dark-mode 1.1s infinite steps(1, start);
            }
        }

        &:empty::after {
            content: "\00a0";
        }
    }

    &__input:focus
        + &__mask
        &__mask-mid-val:not(:empty)
        + &__mask-post-val::before {
        background: transparent;
        animation: none;
    }

    &__input:focus + &__mask &__mask-mid-val:not(:empty) {
        background: @select-color;

        .enable__is-dark-mode & {
            color: @dark-mode-black;
        }
    }
}

@keyframes blink {
    0% {
        background-color: transparent;
    }
    50% {
        background-color: black;
    }
    100% {
        background-color: transparent;
    }
}


@keyframes blink-dark-mode {
    0% {
        background-color: transparent;
    }
    50% {
        background-color: @dark-mode-white;
    }
    100% {
        background-color: transparent;
    }
}