@import '../../variables.scss';

#{$biz-css-prefix}-captcha {
  position: relative;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 8px;
  padding-left: 2px;
  padding-right: 10px;
  border-bottom: 1px solid var(--color-gray-30);
  font-size: 16px;
  display: flex;

  .inner-content {
    flex-grow: 1;
  }

  .inner-input {
    color: var(--color-gray-90);
    background: transparent;
    border: none;
    width: 100%;
    font-size: 16px;
    vertical-align: 0px;
    padding-right: 22px;
    outline: none;

    &:disabled {
      color: var(--color-gray-50);
      background: transparent;
    }
  }

  .inner-label {
    margin-right: 15px;
    min-width: 80px;
  }

  .icon-times-circle {
    font-size: 18px;
    position: absolute;
    right: 10px;
    top: 14px;
    color: var(--color-gray-40);
  }

  .inner-code-time {
    min-width: 80px;
    text-align: right;
    border-left: 1px solid #F0F0F0;
    height: 25px;

    .au-button {
      margin-top: -20px;
      cursor: pointer;
    }

    .code-time {
      font-size: 12px;
      color: var(--color-gray-40);
    }
    &.inner-code-time-active {
      min-width: 88px;
    }
  }
}

input::-webkit-input-placeholder {
  color: var(--color-gray-40);
}