@import '../../style/mixin';

.Yep-password-input {
  position: relative;
  margin: 0 15px;
  -webkit-user-select: none;
  user-select: none;

  &-ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    width: 100%;
    height: 100px;

    .Yep-password-input-li {
      position: relative;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;
      height: 100%;
      font-size: 40px;
      line-height: 100px;
      text-align: center;
      background-color: #fff;

      i {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 10px;
        height: 10px;
        margin: -5px 0 0 -5px;
        background-color: #000;
        border-radius: 100%;
      }
    }
    .Yep-password-input-hairline-left {
      @include hairline-left($border-color-base);
    }
  }

  .Yep-password-input-message {
    margin-top: 24px;
    font-size: 24px;
    text-align: center;
    color: #969799;
  }

  &-hairline-surround {
    @include bd-all-1px($border-color-base);
  }
}