/**
 * PisellPhone 组件样式
 * 基于 Figma 设计规范，覆盖时使用 pisell-lowcode-xxx
 */

.pisell-phone {
  &-edit {
    position: relative;
    width: 100%;

    .pisell-lowcode-space-compact {
      width: 100%;
      position: relative;
      border-radius: 8px;

      // 聚焦时整体外圈（与 SingleLineText 一致）
      &:focus-within {
        box-shadow: 0 0 0 4px #f4ebff; // Primary/100
      }
    }

    // 国家码 Select 与 号码 Input 共用 Figma 设计 token
    .pisell-lowcode-select-selector,
    .pisell-lowcode-input {
      font-size: 16px !important;
      line-height: 24px !important;
      border: 1px solid #d0d5dd !important; // Gray/300
      color: #101828 !important; // Gray/900
      background-color: #ffffff !important;
      height: 48px !important;
      padding: 12px 16px !important;

      &::placeholder {
        color: #667085 !important; // Gray/500
      }

      &:hover:not(:focus):not(.pisell-lowcode-select-open):not([disabled]) {
        border-color: #b692f6 !important; // Primary/400
      }

      &[disabled],
      &.pisell-lowcode-input-disabled {
        background-color: #f9fafb !important; // Gray/50
        color: #98a2b3 !important; // Gray/400
        border-color: #d0d5dd !important;
        cursor: not-allowed !important;
      }
    }

    // 国家码选择器：左侧部分，去掉右侧边框与圆角
    .pisell-lowcode-select {
      flex-shrink: 0;

      .pisell-lowcode-select-selector {
        border-right: none !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-top-left-radius: 8px !important;
        border-bottom-left-radius: 8px !important;
        min-height: 48px !important;
        padding: 4px 12px 4px 16px !important;
        align-items: center !important;
      }

      &.pisell-lowcode-select-focused .pisell-lowcode-select-selector {
        border-color: #d6bbfb !important; // Primary/300
        box-shadow: none !important;
      }
    }

    // 号码输入框：右侧部分，去掉左侧边框与圆角
    .pisell-lowcode-input {
      flex: 1;
      border-left: none !important;
      border-top-left-radius: 0 !important;
      border-bottom-left-radius: 0 !important;
      border-top-right-radius: 8px !important;
      border-bottom-right-radius: 8px !important;

      &:focus {
        border-color: #d6bbfb !important; // Primary/300
        box-shadow: none !important;
        outline: none !important;
      }
    }

    // 整体聚焦时两侧边框统一为 Primary
    .pisell-lowcode-space-compact:focus-within .pisell-lowcode-select-selector,
    .pisell-lowcode-space-compact:focus-within .pisell-lowcode-input {
      border-color: #d6bbfb !important;
    }

    .pisell-lowcode-space-compact:focus-within .pisell-lowcode-select-selector {
      box-shadow: none !important;
    }

    // 清空按钮
    .pisell-lowcode-input-clear-icon {
      color: #667085 !important;
      font-size: 14px !important;

      &:hover {
        color: #344054 !important; // Gray/700
      }
    }

    // 错误状态：Select + Input 整体
    .pisell-lowcode-select-status-error .pisell-lowcode-select-selector,
    .pisell-lowcode-input-status-error {
      border-color: #fda29b !important; // Error/300
    }

    .pisell-lowcode-space-compact:has(.pisell-lowcode-select-status-error) .pisell-lowcode-select-selector,
    .pisell-lowcode-space-compact:has(.pisell-lowcode-input-status-error) .pisell-lowcode-input {
      border-color: #fda29b !important;
    }

    .pisell-lowcode-space-compact:focus-within:has(.pisell-lowcode-input-status-error) .pisell-lowcode-select-selector,
    .pisell-lowcode-space-compact:focus-within:has(.pisell-lowcode-input-status-error) .pisell-lowcode-input,
    .pisell-lowcode-space-compact:focus-within:has(.pisell-lowcode-select-status-error) .pisell-lowcode-select-selector,
    .pisell-lowcode-space-compact:focus-within:has(.pisell-lowcode-select-status-error) .pisell-lowcode-input {
      border-color: #f97066 !important; // Error/400
    }

    .pisell-lowcode-space-compact:focus-within:has(.pisell-lowcode-input-status-error),
    .pisell-lowcode-space-compact:focus-within:has(.pisell-lowcode-select-status-error) {
      box-shadow: 0 0 0 4px #fee4e2 !important; // Error/100
    }
  }

  &-error {
    margin-top: 4px;
    font-size: 12px;
    color: #d92d20; // Error/600
    line-height: 1.5;
    animation: pisell-phone-fadeIn 0.3s ease-in-out;
  }

  &-read {
    display: inline-flex;
    align-items: center;
  }

  &-flag {
    font-size: 18px;
    line-height: 1;
  }

  &-country-code {
    line-height: 1.5;
  }

  &-clickable {
    transition: color 0.2s ease-in-out;

    &:hover {
      color: #6d48c4 !important;
    }

    &:active {
      color: #5f3da8 !important;
    }
  }

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

@keyframes pisell-phone-fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}