@import "./variables";

.#{$component-prefix}password-input {
  position: relative;
  margin: $password-input-margin;
  user-select: none;

  &__security {
    display: flex;
    width: 100%;
    height: $password-input-height;
    cursor: pointer;

    &::after {
      border-radius: $password-input-border-radius;
    }
  }

  &__item {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: $password-input-item-font-size;
    line-height: 1.2;
    background: $password-input-item-background-color;

    &--mask {
      position: absolute;
      top: 50%;
      left: 50%;
      width: $password-input-mask-width;
      height: $password-input-mask-height;
      visibility: hidden;
      background: $password-input-mask-color;
      border-radius: 100%;
      transform: translate(-50%, -50%);
    }
  }

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

@keyframes #{$component-prefix}cursor-flicker {
  from {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}