@use 'sass:map';
@use '@mezzanine-ui/system/palette' as palette;
@use '@mezzanine-ui/system/spacing' as spacing;
@use '@mezzanine-ui/system/radius' as radius;
@use '@mezzanine-ui/system/effect' as effect;
@use '@mezzanine-ui/system/transition' as transition;
@use '@mezzanine-ui/system/motion' as motion;
@use '@mezzanine-ui/system/typography' as typography;
@use '../icon';
@use './utils';
@use './button' as *;

$base-primary: (
  enable: (
    text-color: palette.semantic-variable(text, fixed-light),
    icon-color: palette.semantic-variable(icon, fixed-light),
    background-color: palette.semantic-variable(background, brand),
    border-color: none,
    focus-color: none,
  ),
  hover: (
    text-color: palette.semantic-variable(text, fixed-light),
    icon-color: palette.semantic-variable(icon, fixed-light),
    background-color: palette.semantic-variable(background, brand-strong),
    border-color: none,
    focus-color: none,
  ),
  active: (
    text-color: palette.semantic-variable(text, fixed-light),
    icon-color: palette.semantic-variable(icon, fixed-light),
    background-color: palette.semantic-variable(background, brand-solid),
    border-color: none,
    focus-color: none,
  ),
  focus: (
    text-color: palette.semantic-variable(text, fixed-light),
    icon-color: palette.semantic-variable(icon, fixed-light),
    background-color: palette.semantic-variable(background, brand),
    border-color: none,
    focus-color: effect.variable(focus, primary),
  ),
  disabled: (
    text-color: palette.semantic-variable(text, neutral-light),
    icon-color: palette.semantic-variable(icon, neutral-light),
    background-color: palette.semantic-variable(background, neutral-subtle),
    border-color: none,
    focus-color: none,
  ),
  loading: (
    text-color: none,
    icon-color: palette.semantic-variable(icon, fixed-light, 60),
    background-color: palette.semantic-variable(background, brand),
    border-color: none,
    focus-color: none,
  ),
);

// Base Secondary
$base-secondary: (
  enable: (
    text-color: palette.semantic-variable(text, neutral-strong),
    icon-color: palette.semantic-variable(icon, neutral-strong),
    background-color: palette.semantic-variable(background, base),
    border-color: palette.semantic-variable(border, neutral-faint),
    focus-color: none,
  ),
  hover: (
    text-color: palette.semantic-variable(text, neutral-strong),
    icon-color: palette.semantic-variable(icon, neutral-strong),
    background-color: palette.semantic-variable(background, neutral-ghost),
    border-color: palette.semantic-variable(border, neutral-faint),
    focus-color: none,
  ),
  active: (
    text-color: palette.semantic-variable(text, neutral-solid),
    icon-color: palette.semantic-variable(icon, neutral-solid),
    background-color: palette.semantic-variable(background, neutral-faint),
    border-color: palette.semantic-variable(border, neutral-faint),
    focus-color: none,
  ),
  focus: (
    text-color: palette.semantic-variable(text, neutral-strong),
    icon-color: palette.semantic-variable(icon, neutral-strong),
    background-color: palette.semantic-variable(background, base),
    border-color: palette.semantic-variable(border, neutral-faint),
    focus-color: effect.variable(focus, primary),
  ),
  disabled: (
    text-color: palette.semantic-variable(text, neutral-light),
    icon-color: palette.semantic-variable(icon, neutral-light),
    background-color: palette.semantic-variable(background, neutral-subtle),
    border-color: palette.semantic-variable(border, neutral-light),
    focus-color: none,
  ),
  loading: (
    text-color: none,
    icon-color: palette.semantic-variable(icon, neutral-bold, 60),
    background-color: palette.semantic-variable(background, base),
    border-color: palette.semantic-variable(border, neutral-faint),
    focus-color: none,
  ),
);

// Base Tertiary
$base-tertiary: (
  enable: (
    text-color: palette.semantic-variable(text, neutral-strong),
    icon-color: palette.semantic-variable(icon, neutral-strong),
    background-color: none,
    border-color: none,
    focus-color: none,
  ),
  hover: (
    text-color: palette.semantic-variable(text, neutral-strong),
    icon-color: palette.semantic-variable(icon, neutral-strong),
    background-color: palette.semantic-variable(background, brand-ghost),
    border-color: none,
    focus-color: none,
  ),
  active: (
    text-color: palette.semantic-variable(text, neutral-solid),
    icon-color: palette.semantic-variable(icon, neutral-solid),
    background-color: palette.semantic-variable(background, brand-faint),
    border-color: none,
    focus-color: none,
  ),
  focus: (
    text-color: palette.semantic-variable(text, neutral-strong),
    icon-color: palette.semantic-variable(icon, neutral-strong),
    background-color: palette.semantic-variable(background, base),
    border-color: none,
    focus-color: effect.variable(focus, primary),
  ),
  disabled: (
    text-color: palette.semantic-variable(text, neutral-light),
    icon-color: palette.semantic-variable(icon, neutral-light),
    background-color: none,
    border-color: none,
    focus-color: none,
  ),
  loading: (
    text-color: none,
    icon-color: palette.semantic-variable(icon, neutral, 60),
    background-color: none,
    border-color: none,
    focus-color: none,
  ),
);

// Base Ghost
$base-ghost: (
  enable: (
    text-color: palette.semantic-variable(text, brand),
    icon-color: palette.semantic-variable(icon, brand),
    background-color: none,
    border-color: none,
    focus-color: none,
  ),
  hover: (
    text-color: palette.semantic-variable(text, brand-strong),
    icon-color: palette.semantic-variable(icon, brand-strong),
    background-color: none,
    border-color: none,
    focus-color: none,
  ),
  active: (
    text-color: palette.semantic-variable(text, brand-solid),
    icon-color: palette.semantic-variable(icon, brand-solid),
    background-color: none,
    border-color: none,
    focus-color: none,
  ),
  focus: (
    text-color: palette.semantic-variable(text, brand),
    icon-color: palette.semantic-variable(icon, brand),
    background-color: palette.semantic-variable(background, base),
    border-color: none,
    focus-color: effect.variable(focus, primary),
  ),
  disabled: (
    text-color: palette.semantic-variable(text, neutral-light),
    icon-color: palette.semantic-variable(icon, neutral-light),
    background-color: none,
    border-color: none,
    focus-color: none,
  ),
  loading: (
    text-color: none,
    icon-color: palette.semantic-variable(icon, neutral-bold, 60),
    background-color: none,
    border-color: none,
    focus-color: none,
  ),
);

// Base Dashed
$base-dashed: (
  enable: (
    text-color: palette.semantic-variable(text, neutral-strong),
    icon-color: palette.semantic-variable(icon, neutral-strong),
    background-color: palette.semantic-variable(background, base),
    border-color: palette.semantic-variable(border, neutral-faint),
    focus-color: none,
  ),
  hover: (
    text-color: palette.semantic-variable(text, neutral-strong),
    icon-color: palette.semantic-variable(icon, neutral-strong),
    background-color: palette.semantic-variable(background, neutral-ghost),
    border-color: palette.semantic-variable(border, neutral-faint),
    focus-color: none,
  ),
  active: (
    text-color: palette.semantic-variable(text, neutral-solid),
    icon-color: palette.semantic-variable(icon, neutral-solid),
    background-color: palette.semantic-variable(background, neutral-faint),
    border-color: palette.semantic-variable(border, neutral-faint),
    focus-color: none,
  ),
  focus: (
    text-color: palette.semantic-variable(text, neutral-strong),
    icon-color: palette.semantic-variable(icon, neutral-strong),
    background-color: palette.semantic-variable(background, base),
    border-color: palette.semantic-variable(border, neutral-faint),
    focus-color: effect.variable(focus, primary),
  ),
  disabled: (
    text-color: palette.semantic-variable(text, neutral-light),
    icon-color: palette.semantic-variable(icon, neutral-light),
    background-color: palette.semantic-variable(background, neutral-subtle),
    border-color: palette.semantic-variable(border, neutral-light),
    focus-color: none,
  ),
  loading: (
    text-color: none,
    icon-color: palette.semantic-variable(icon, neutral-bold, 60),
    background-color: palette.semantic-variable(background, base),
    border-color: palette.semantic-variable(border, neutral-faint),
    focus-color: none,
  ),
);

// Base Text Link
$base-text-link: (
  enable: (
    text-color: palette.semantic-variable(text, brand),
    icon-color: palette.semantic-variable(icon, brand),
    background-color: none,
    border-color: none,
    focus-color: none,
  ),
  hover: (
    text-color: palette.semantic-variable(text, brand-strong),
    icon-color: palette.semantic-variable(icon, brand-strong),
    background-color: none,
    border-color: none,
    focus-color: none,
  ),
  active: (
    text-color: palette.semantic-variable(text, brand-solid),
    icon-color: palette.semantic-variable(icon, brand-solid),
    background-color: none,
    border-color: none,
    focus-color: none,
  ),
  focus: (
    text-color: palette.semantic-variable(text, brand),
    icon-color: palette.semantic-variable(icon, brand),
    background-color: palette.semantic-variable(background, base),
    border-color: none,
    focus-color: effect.variable(focus, primary),
  ),
  disabled: (
    text-color: palette.semantic-variable(text, neutral-light),
    icon-color: palette.semantic-variable(icon, neutral-light),
    background-color: none,
    border-color: none,
    focus-color: none,
  ),
  // 設計未定義
  loading: (
    text-color: none,
    icon-color: none,
    background-color: none,
    border-color: none,
    focus-color: none,
  ),
);

// Destructive Primary
$destructive-primary: (
  enable: (
    text-color: palette.semantic-variable(text, fixed-light),
    icon-color: palette.semantic-variable(icon, fixed-light),
    background-color: palette.semantic-variable(background, error),
    border-color: none,
    focus-color: none,
  ),
  hover: (
    text-color: palette.semantic-variable(text, fixed-light),
    icon-color: palette.semantic-variable(icon, fixed-light),
    background-color: palette.semantic-variable(background, error-strong),
    border-color: none,
    focus-color: none,
  ),
  active: (
    text-color: palette.semantic-variable(text, fixed-light),
    icon-color: palette.semantic-variable(icon, fixed-light),
    background-color: palette.semantic-variable(background, error-solid),
    border-color: none,
    focus-color: none,
  ),
  focus: (
    text-color: palette.semantic-variable(text, fixed-light),
    icon-color: palette.semantic-variable(icon, fixed-light),
    background-color: palette.semantic-variable(background, error),
    border-color: none,
    focus-color: effect.variable(focus, error),
  ),
  disabled: (
    text-color: palette.semantic-variable(text, neutral-light),
    icon-color: palette.semantic-variable(icon, neutral-light),
    background-color: palette.semantic-variable(background, neutral-subtle),
    border-color: none,
    focus-color: none,
  ),
  loading: (
    text-color: none,
    icon-color: palette.semantic-variable(icon, fixed-light, 60),
    background-color: palette.semantic-variable(background, error),
    border-color: none,
    focus-color: none,
  ),
);

// Destructive Secondary
$destructive-secondary: (
  enable: (
    text-color: palette.semantic-variable(text, error),
    icon-color: palette.semantic-variable(icon, error),
    background-color: palette.semantic-variable(background, base),
    border-color: palette.semantic-variable(border, error),
    focus-color: none,
  ),
  hover: (
    text-color: palette.semantic-variable(text, error),
    icon-color: palette.semantic-variable(icon, error),
    background-color: palette.semantic-variable(background, error-ghost),
    border-color: palette.semantic-variable(border, error),
    focus-color: none,
  ),
  active: (
    text-color: palette.semantic-variable(text, error),
    icon-color: palette.semantic-variable(icon, error),
    background-color: palette.semantic-variable(background, error-faint),
    border-color: palette.semantic-variable(border, error),
    focus-color: none,
  ),
  focus: (
    text-color: palette.semantic-variable(text, error),
    icon-color: palette.semantic-variable(icon, error),
    background-color: palette.semantic-variable(background, base),
    border-color: palette.semantic-variable(border, error),
    focus-color: effect.variable(focus, error),
  ),
  disabled: (
    text-color: palette.semantic-variable(text, neutral-light),
    icon-color: palette.semantic-variable(icon, neutral-light),
    background-color: palette.semantic-variable(background, neutral-subtle),
    border-color: palette.semantic-variable(border, neutral-light),
    focus-color: none,
  ),
  loading: (
    text-color: none,
    icon-color: palette.semantic-variable(icon, error, 60),
    background-color: none,
    border-color: palette.semantic-variable(border, error),
    focus-color: none,
  ),
);

// Destructive Ghost
$destructive-ghost: (
  enable: (
    text-color: palette.semantic-variable(text, error),
    icon-color: palette.semantic-variable(icon, error),
    background-color: none,
    border-color: none,
    focus-color: none,
  ),
  hover: (
    text-color: palette.semantic-variable(text, error),
    icon-color: palette.semantic-variable(icon, error),
    background-color: palette.semantic-variable(background, error-ghost),
    border-color: none,
    focus-color: none,
  ),
  active: (
    text-color: palette.semantic-variable(text, error),
    icon-color: palette.semantic-variable(icon, error),
    background-color: palette.semantic-variable(background, error-faint),
    border-color: none,
    focus-color: none,
  ),
  focus: (
    text-color: palette.semantic-variable(text, error),
    icon-color: palette.semantic-variable(icon, error),
    background-color: palette.semantic-variable(background, base),
    border-color: none,
    focus-color: effect.variable(focus, error),
  ),
  disabled: (
    text-color: palette.semantic-variable(text, neutral-light),
    icon-color: palette.semantic-variable(icon, neutral-light),
    background-color: none,
    border-color: none,
    focus-color: none,
  ),
  loading: (
    text-color: none,
    icon-color: palette.semantic-variable(icon, error, 60),
    background-color: none,
    border-color: none,
    focus-color: none,
  ),
);

// Destructive Text Link
$destructive-text-link: (
  enable: (
    text-color: palette.semantic-variable(text, error),
    icon-color: palette.semantic-variable(icon, error),
    background-color: none,
    border-color: none,
    focus-color: none,
  ),
  hover: (
    text-color: palette.semantic-variable(text, error-strong),
    icon-color: palette.semantic-variable(icon, error-strong),
    background-color: none,
    border-color: none,
    focus-color: none,
  ),
  active: (
    text-color: palette.semantic-variable(text, error-solid),
    icon-color: palette.semantic-variable(icon, error-solid),
    background-color: none,
    border-color: none,
    focus-color: none,
  ),
  focus: (
    text-color: palette.semantic-variable(text, error),
    icon-color: palette.semantic-variable(icon, error),
    background-color: palette.semantic-variable(background, base),
    border-color: none,
    focus-color: effect.variable(focus, error),
  ),
  disabled: (
    text-color: palette.semantic-variable(text, neutral-light),
    icon-color: palette.semantic-variable(icon, neutral-light),
    background-color: none,
    border-color: none,
    focus-color: none,
  ),
  // 設計未定義
  loading: (
    text-color: none,
    icon-color: none,
    background-color: none,
    border-color: none,
    focus-color: none,
  ),
);

// Inverse
$inverse: (
  enable: (
    text-color: palette.semantic-variable(text, fixed-light),
    icon-color: palette.semantic-variable(icon, fixed-light),
    background-color: none,
    border-color: palette.semantic-variable(border, fixed-light-alpha),
    focus-color: none,
  ),
  hover: (
    text-color: palette.semantic-variable(text, fixed-light),
    icon-color: palette.semantic-variable(icon, fixed-light),
    background-color: palette.semantic-variable(surface, ghost),
    border-color: none,
    focus-color: none,
  ),
  active: (
    text-color: palette.semantic-variable(text, fixed-light),
    icon-color: palette.semantic-variable(icon, fixed-light),
    background-color: palette.semantic-variable(surface, subtle),
    border-color: none,
    focus-color: none,
  ),
  focus: (
    text-color: palette.semantic-variable(text, neutral-solid),
    icon-color: palette.semantic-variable(icon, neutral-solid),
    background-color: palette.semantic-variable(background, base),
    border-color: palette.semantic-variable(border, fixed-light),
    focus-color: effect.variable(focus, primary),
  ),
  disabled: (
    text-color: palette.semantic-variable(text, neutral-light),
    icon-color: palette.semantic-variable(icon, neutral-light),
    background-color: none,
    border-color: none,
    focus-color: none,
  ),
  // 設計未定義
  loading: (
    text-color: none,
    icon-color: none,
    background-color: none,
    border-color: none,
    focus-color: none,
  ),
);

$inverse-ghost: (
  enable: (
    text-color: palette.semantic-variable(text, fixed-light),
    icon-color: palette.semantic-variable(icon, fixed-light),
    background-color: none,
    border-color: none,
    focus-color: none,
  ),
  hover: (
    text-color: palette.semantic-variable(text, fixed-light),
    icon-color: palette.semantic-variable(icon, fixed-light),
    background-color: palette.semantic-variable(surface, ghost),
    border-color: none,
    focus-color: none,
  ),
  active: (
    text-color: palette.semantic-variable(text, fixed-light),
    icon-color: palette.semantic-variable(icon, fixed-light),
    background-color: palette.semantic-variable(surface, subtle),
    border-color: none,
    focus-color: none,
  ),
  focus: (
    text-color: palette.semantic-variable(text, neutral-solid),
    icon-color: palette.semantic-variable(icon, neutral-solid),
    background-color: palette.semantic-variable(background, base),
    border-color: palette.semantic-variable(border, fixed-light),
    focus-color: effect.variable(focus, primary),
  ),
  disabled: (
    text-color: palette.semantic-variable(text, neutral-light),
    icon-color: palette.semantic-variable(icon, neutral-light),
    background-color: none,
    border-color: none,
    focus-color: none,
  ),
  // 設計未定義
  loading: (
    text-color: none,
    icon-color: none,
    background-color: none,
    border-color: none,
    focus-color: none,
  ),
);

// Variant hierarchy map - 將所有 variants 整合
$variant-hierarchy: (
  base-primary: $base-primary,
  base-secondary: $base-secondary,
  base-tertiary: $base-tertiary,
  base-ghost: $base-ghost,
  base-dashed: $base-dashed,
  base-text-link: $base-text-link,
  destructive-primary: $destructive-primary,
  destructive-secondary: $destructive-secondary,
  destructive-ghost: $destructive-ghost,
  destructive-text-link: $destructive-text-link,
  inverse: $inverse,
  inverse-ghost: $inverse-ghost,
);

// Size: main
$size-main-configs: (
  // 無 icon
  default: (
    min-width: spacing.semantic-variable(size, element, expansive),
    padding-y: spacing.semantic-variable(padding, vertical, calm),
    padding-x: spacing.semantic-variable(padding, horizontal, roomy),
  ),
  // Icon 在前 (leading)
  leading: (
    padding-y: spacing.semantic-variable(padding, vertical, calm),
    padding-left: spacing.semantic-variable(padding, horizontal, cozy),
    padding-right: spacing.semantic-variable(padding, horizontal, roomy),
  ),
  // Icon 在後 (trailing)
  trailing: (
    padding-y: spacing.semantic-variable(padding, vertical, calm),
    padding-left: spacing.semantic-variable(padding, horizontal, roomy),
    padding-right: spacing.semantic-variable(padding, horizontal, cozy),
  ),
  // Icon only
  icon-only: (
    padding-y: spacing.semantic-variable(padding, vertical, calm),
    padding-x: spacing.semantic-variable(padding, horizontal, cozy),
  ),
);

// Size: sub
$size-sub-configs: (
  // 無 icon
  default: (
    min-width: spacing.semantic-variable(size, element, expansive),
    padding-y: spacing.semantic-variable(padding, vertical, tight),
    padding-x: spacing.semantic-variable(padding, horizontal, cozy),
  ),
  // Icon 在前 (leading)
  leading: (
    padding-y: spacing.semantic-variable(padding, vertical, tight),
    padding-left: spacing.semantic-variable(padding, horizontal, tight),
    padding-right: spacing.semantic-variable(padding, horizontal, cozy),
  ),
  // Icon 在後 (trailing)
  trailing: (
    padding-y: spacing.semantic-variable(padding, vertical, tight),
    padding-left: spacing.semantic-variable(padding, horizontal, cozy),
    padding-right: spacing.semantic-variable(padding, horizontal, tight),
  ),
  // Icon only
  icon-only: (
    padding-y: spacing.semantic-variable(padding, vertical, tight),
    padding-x: spacing.semantic-variable(padding, horizontal, tight),
  ),
);

// Size: minor
$size-minor-configs: (
  // 無 icon
  default: (
    min-width: spacing.semantic-variable(size, element, extra-wide),
    padding-y: spacing.semantic-variable(padding, vertical, tiny),
    padding-x: spacing.semantic-variable(padding, horizontal, tight),
  ),
  // Icon 在前 (leading)
  leading: (
    padding-y: spacing.semantic-variable(padding, vertical, tiny),
    padding-left: spacing.semantic-variable(padding, horizontal, tight),
    padding-right: spacing.semantic-variable(padding, horizontal, tiny),
  ),
  // Icon 在後 (trailing)
  trailing: (
    padding-y: spacing.semantic-variable(padding, vertical, tiny),
    padding-left: spacing.semantic-variable(padding, horizontal, tiny),
    padding-right: spacing.semantic-variable(padding, horizontal, tight),
  ),
  // Icon only
  icon-only: (
    padding-y: spacing.semantic-variable(padding, vertical, tiny),
    padding-x: spacing.semantic-variable(padding, horizontal, tiny),
  ),
);

// 整合所有 size 配置
$size-configs: (
  main: (
    typography: button-highlight,
    padding-configs: $size-main-configs,
  ),
  sub: (
    typography: button-highlight,
    padding-configs: $size-sub-configs,
  ),
  minor: (
    typography: button,
    padding-configs: $size-minor-configs,
  ),
);

// 取得特定 variant 和 hierarchy 的顏色值
@function _get-color($variant, $hierarchy, $property) {
  $variant-map: map.get($variant-hierarchy, $variant);

  @if $variant-map {
    $hierarchy-map: map.get($variant-map, $hierarchy);

    @if $hierarchy-map {
      $value: map.get($hierarchy-map, $property);

      @if $value == none {
        @return null;
      } @else {
        @return $value;
      }
    }
  }

  @return null;
}

// 套用 loading 狀態的 Spin CSS 變數
// --mzn-spin--color  : 動畫弧線色（對應 loading icon-color）
// --mzn-spin--track-color : 靜態軌道色（對應 loading background-color，無背景則不設定，讓 Spin 使用 transparent fallback）
@mixin _apply-loading-spin-colors($variant) {
  $icon: _get-color($variant, loading, icon-color);
  $bg: _get-color($variant, loading, background-color);

  @if $icon {
    --mzn-spin--color: #{$icon};
  }

  @if $bg {
    --mzn-spin--track-color: #{$bg};
  }
}

// 套用特定層級的顏色
@mixin _apply-hierarchy-colors($variant, $hierarchy) {
  $text: _get-color($variant, $hierarchy, text-color);
  $icon: _get-color($variant, $hierarchy, icon-color);
  $bg: _get-color($variant, $hierarchy, background-color);
  $border: _get-color($variant, $hierarchy, border-color);
  $focus: _get-color($variant, $hierarchy, focus-color);

  @if $text {
    color: $text;
  }

  @if $bg {
    background-color: $bg;
  }

  @if $border {
    border-color: $border;
  }

  @if $icon {
    --#{$prefix}-icon-color: #{$icon};
  }

  @if $focus {
    box-shadow: $focus;
  }
}

// 套用 variant 的所有狀態
@mixin _apply-variant-states($variant) {
  @include _apply-hierarchy-colors($variant, enable);

  // Hover state
  &:hover:not(.#{$prefix}--disabled):not(.#{$prefix}--loading) {
    @include _apply-hierarchy-colors($variant, hover);
  }

  // Active state
  &:active:not(.#{$prefix}--disabled):not(.#{$prefix}--loading) {
    @include _apply-hierarchy-colors($variant, active);
  }

  // Focus state
  &:focus-visible:not(.#{$prefix}--disabled):not(.#{$prefix}--loading) {
    @include _apply-hierarchy-colors($variant, focus);
  }

  // Disabled state
  &.#{$prefix}--disabled {
    @include _apply-hierarchy-colors($variant, disabled);
  }

  // Loading state
  &.#{$prefix}--loading {
    @include _apply-hierarchy-colors($variant, loading);
    @include _apply-loading-spin-colors($variant);
  }
}

// 套用特定 icon position 的 padding
@mixin _apply-padding($padding-config) {
  @if map.has-key($padding-config, padding-x) {
    // 對稱 padding (default 和 icon-only)
    padding: map.get($padding-config, padding-y) map.get($padding-config, padding-x);
  } @else {
    // 非對稱 padding (leading 和 trailing)
    padding: map.get($padding-config, padding-y) map.get($padding-config, padding-right) map.get($padding-config, padding-y) map.get($padding-config, padding-left);
  }

  @if map.has-key($padding-config, min-width) {
    min-width: map.get($padding-config, min-width);
  }
}

// 套用 size 配置
@mixin _apply-size($size, $variant: null) {
  $config: map.get($size-configs, $size);

  @if $config {
    // Inverse variant: main/sub 使用 button-highlight (font-weight 500)，minor 使用 button
    @if $variant == 'inverse' {
      @if $size == 'minor' {
        @include typography.semantic-variable(button);
      } @else {
        @include typography.semantic-variable(button-highlight);
      }
    } @else {
      @include typography.semantic-variable(map.get($config, typography));
    }

    // 預設 padding (無 icon)
    $padding-configs: map.get($config, padding-configs);
    $default-padding: map.get($padding-configs, default);

    @include _apply-padding($default-padding);

    // Icon leading - 左邊有 icon
    &.#{$prefix}--icon-leading {
      $leading-padding: map.get($padding-configs, leading);

      @include _apply-padding($leading-padding);
    }

    // Icon trailing - 右邊有 icon
    &.#{$prefix}--icon-trailing {
      $trailing-padding: map.get($padding-configs, trailing);

      @include _apply-padding($trailing-padding);
    }

    // Icon only - 只有 icon 沒有文字
    &.#{$prefix}--icon-only {
      $icon-only-padding: map.get($padding-configs, icon-only);

      @include _apply-padding($icon-only-padding);

      width: fit-content;
      aspect-ratio: 1;
      min-width: unset;
    }
  }
}

.#{$prefix} {
  @include utils.reset();
  @include typography.nowrap();

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: spacing.semantic-variable(gap, tight);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: radius.variable(base);
  transition:
    transition.standard(background-color, fast),
    transition.standard(border-color, fast),
    transition.standard(color, fast);
  will-change: background-color, border-color, color;

  &--disabled {
    cursor: not-allowed;
    pointer-events: none;
  }

  &--loading {
    cursor: default;
    pointer-events: none;
  }

  @each $size in $sizes {
    &--#{$size} {
      @include _apply-size($size);
    }
  }

  @each $variant in $variants {
    &--#{$variant} {
      @include _apply-variant-states($variant);

      // Inverse variant 的所有 size 都使用 button typography
      @if $variant == 'inverse' or $variant == 'inverse-ghost' {
        @each $size in $sizes {
          &.#{$prefix}--#{$size} {
            @include _apply-size($size, inverse);
          }
        }
      }

      // Dashed variant 需要虛線邊框
      @if $variant == 'base-dashed' {
        border-style: dashed;
      }

      // Text link variants 不需要 padding
      @if $variant == 'base-text-link' or $variant == 'destructive-text-link' {
        padding: 0;

        &.#{$prefix}--icon-leading,
        &.#{$prefix}--icon-trailing,
        &.#{$prefix}--icon-only {
          padding: 0;
        }

        // minor size 需要 font-weight: 500
        &.#{$prefix}--minor {
          font-weight: 500;
        }
      }
    }
  }

  .#{icon.$prefix} {
    font-size: typography.px-to-rem(16px);
    color: var(--#{$prefix}-icon-color, currentColor);
  }
}

.#{$group-prefix} {
  display: inline-flex;
  gap: spacing.semantic-variable(gap, base);
  align-items: center;

  &--vertical {
    flex-direction: column;
  }

  &--full-width {
    width: 100%;

    .#{$prefix} {
      flex: 1;
    }
  }
}