@import (reference) '../theme/variables/index.less';

@prefixClsEG: verificationCodePC;

.@{prefixClsEG} {
  display: flex;
  flex-direction: column;
  min-width: 160px;
  color: #1c242e;

  &-titleTop {
    display: flex;
    flex-direction: column;

    .topText {
      height: 32px;
      line-height: 32px;
    }
  }

  &-titleLeft {
    display: flex;
    flex-direction: row;
    align-items: center;

    .titleText {
      flex-shrink: 0;
      margin-right: 8px;
    }
  }

  &-inputContent {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid @border-color-base;
    border-radius: 2px;
    // height: 32px;

    .normalArea {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      // height: 48px;
      padding-right: 5px;

      .titleText {
        flex-shrink: 0;
        margin-right: 16px;
      }

      input {
        flex: 1;
        min-width: 80px;
        background: none;
        border: 0;
      }

      .@{ant-prefix}-input.@{ant-prefix}-input-lg {
        font-size: 14px;
      }
      .@{ant-prefix}-input.@{ant-prefix}-input-sm {
        padding: 0 8px;
        line-height: 26px;
      }
      ::-webkit-input-placeholder {
        color: rgba(28, 36, 46, 0.25);
      }
      :focus-visible {
        outline-width: 0px;
      }

      .sendButtonActive {
        flex-shrink: 0;
        color: @primary-color;
      }

      .sendButtonDisable {
        flex-shrink: 0;
        color: rgba(28, 36, 46, 0.45);
        font-size: 86%;
      }

      .imageActive {
        width: 80px;
        height: 30px;
        background-color: #f5f5f5;
      }
    }
    :focus-visible {
      border-color: @primary-color;
    }
  }

  &-errorNotice {
    padding: 0 5px 5px 5px;
    color: @error-color;
  }
}


@prefixClsED: verificationCodeEDPC;

.@{prefixClsED} {
  min-width: 160px;
  color: #1c242e;

  &-titleTop {
    display: flex;
    flex-direction: column;

    .topText {
      height: 32px;
      line-height: 32px;
    }
  }

  &-titleLeft {
    display: flex;
    flex-direction: row;
    align-items: center;

    .titleText {
      flex-shrink: 0;
      margin-right: 8px;
    }
  }

  &-inputContent {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 32px;
    border: 1px solid @border-color-base;

    input {
      flex: 1;
      min-width: 80px;
      padding-left: 5px;
      background: none;
      border: 0;
    }
    
    ::-webkit-input-placeholder {
      color: rgba(28, 36, 46, 0.25);
    }

    .sendButtonActive {
      flex-shrink: 0;
      margin-right: 8px;
      color: @primary-color;
    }

    .sendButtonDisable {
      flex-shrink: 0;
      margin-right: 8px;
      color: rgba(28, 36, 46, 0.45);
      font-size: 86%;
    }

    .imageActive {
      height: 32px;
      margin-right: 0px;
      padding: 0 5px;
      color: #8e9baa;
      line-height: 32px;
      background-color: #f5f5f5;
    }
  }
}