.passwordBox {
  position: relative;

  .inputBox__input {
    color: transparent;
    width: 100%;
    letter-spacing: 20px;
    padding-bottom: 22px;
    padding-left: 10px;
    caret-color: transparent;
  }

  &__pane {
    width: 152px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    margin-top: -6px;
    // left: 50%;
    // margin-left: -77px;
    left: 16px;
    pointer-events: none;

    &__dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #c4c4c4;
      position: relative;

      &:after {
        content: '';
        position: absolute;
        border-radius: 50%;
        background-color: rgba($color: $color-primary, $alpha: 0.3);
        border: solid 1px rgba($color: $color-primary, $alpha: 0.1);
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
      }

      &.active {
        background-color: $color-primary;

        &:after {
          animation-delay: 0s;
          animation-duration: 0.33s;
          animation-timing-function: ease-out;
          opacity: 1;
        }

        &.--animation:not(.--show) {
          &::after {
            animation-name: zoomBounce;
          }
        }
      }

      &.--show {
        font-style: normal;
        text-align: center;
        font-size: 1.6rem;
        line-height: 1;
        background: none;

        &:after {
          content: none;
        }
      }
    }
  }
}

@keyframes zoomBounce {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.9);
  }
}