.phone-input-wrapper {
  width: 100%;

  .phone-input-container {
    display: flex;
    align-items: center;
    width: 100%;
    height: 44px;
    padding: 0 16px;
    background: #FFFFFF;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    transition: all 0.2s ease;

    &:hover {
      border-color: #98A2B3;
    }

    &:focus-within {
      border-color: var(--theme-color, #7F56D9);
      box-shadow: 0px 0px 0px 4px rgba(127, 86, 217, 0.12);
    }
  }

  .phone-input-prefix {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 6px;
    cursor: pointer;
  }

  .phone-input-country-display {
    font-size: 14px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 400;
    line-height: 20px;
    color: #344054;
    pointer-events: none;
    white-space: nowrap;
  }

  .phone-input-select {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 14px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    &:disabled {
      cursor: not-allowed;
    }
  }

  .phone-input-arrow {
    flex-shrink: 0;
    color: #667085;
    pointer-events: none;
  }

  .phone-input-divider {
    width: 1px;
    height: 24px;
    background: #D0D5DD;
    margin: 0 12px;
    flex-shrink: 0;
  }

  .phone-input-field {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 400;
    line-height: 24px;
    color: #101828;
    min-width: 0;

    &::placeholder {
      color: #98A2B3;
    }

    &:disabled {
      cursor: not-allowed;
      color: #98A2B3;
    }

    // 移除 number 类型输入框的上下箭头
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    &[type='number'] {
      -moz-appearance: textfield;
    }
  }

  // 大小变体
  .phone-input-field-large {
    font-size: 16px;
    line-height: 24px;
  }

  .phone-input-field-middle {
    font-size: 14px;
    line-height: 22px;
  }

  .phone-input-field-small {
    font-size: 14px;
    line-height: 20px;
  }

  // 禁用状态
  &.phone-input-disabled {
    .phone-input-container {
      background: #F9FAFB;
      border-color: #D0D5DD;
      cursor: not-allowed;

      &:hover {
        border-color: #D0D5DD;
      }
    }
  }

  // 错误状态
  &.phone-input-error {
    .phone-input-container {
      border-color: #F04438;

      &:focus-within {
        border-color: #F04438;
        box-shadow: 0px 0px 0px 4px rgba(240, 68, 56, 0.12);
      }
    }
  }
}