@import './var.less';

:root {
  --van-password-input-height: @password-input-height;
  --van-password-input-margin: @password-input-margin;
  --van-password-input-font-size: @password-input-font-size;
  --van-password-input-border-radius: @password-input-border-radius;
  --van-password-input-background-color: @password-input-background-color;
  --van-password-input-info-color: @password-input-info-color;
  --van-password-input-info-font-size: @password-input-info-font-size;
  --van-password-input-error-info-color: @password-input-error-info-color;
  --van-password-input-dot-size: @password-input-dot-size;
  --van-password-input-dot-color: @password-input-dot-color;
  --van-password-input-text-color: @password-input-text-color;
  --van-password-input-cursor-color: @password-input-cursor-color;
  --van-password-input-cursor-width: @password-input-cursor-width;
  --van-password-input-cursor-height: @password-input-cursor-height;
  --van-password-input-cursor-animation-duration: @password-input-cursor-animation-duration;
}

.van-password-input {
  position: relative;
  margin: var(--van-password-input-margin);
  user-select: none;

  &__info,
  &__error-info {
    margin-top: var(--van-padding-md);
    font-size: var(--van-password-input-info-font-size);
    text-align: center;
  }

  &__info {
    color: var(--van-password-input-info-color);
  }

  &__error-info {
    color: var(--van-password-input-error-info-color);
  }

  &__security {
    display: flex;
    width: 100%;
    height: var(--van-password-input-height);
    cursor: pointer;

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

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

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

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

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

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}