@import '../../src/style/tools.css';

.bx-verify-code-input {
  & .bx-verify-code-input-button {
    border: none;
    width: 80px;
    color: var(--verify-code-input-primary-color);
    font-size: 15px;
    margin-left: 10px;
    outline: none;
    background: none;
    text-align: right;

    &.bx-verify-code-input-button--getting {
      color: var(--verify-code-input-disabled-color);
    }
  }

  &.has-error .bx-input-body .bx-input-control {
    color: var(--verify-code-input-error-color);

    &::-webkit-input-placeholder {
      color: var(--verify-code-input-error-color);
    }
  }

  & .bx-verify-code-input-voice {
    height: 48px;
    line-height: 48px;
    padding-right: 15px;
    padding-left: 15px;
    background-color: var(--verify-code-input-bg-color);
    font-size: 15px;
    color: var(--verify-code-input-primary-color);
    text-align: right;

    &.bx-verify-code-input-button--getting {
      color: var(--verify-code-input-disabled-color);
    }

    &.bx-hairline--top::after {
      left: 15px;
    }

    &span {
      height: 20px;
    }
  }

  & .bx-verify-code-input-slider {
    height: 105px;
    background: var(--verify-code-input-bg-color);
    padding: 15px;
    display: none;
    box-sizing: border-box;

    & .bx-verify-code-input-tip {
      margin-bottom: 12px;
      font-size: 15px;
      color: var(--verify-code-input-tip-color);
      letter-spacing: 0;
      line-height: 18px;
    }
  }
}
