$default-variables: (
  // Wrapping list
  'List____gap': 0.5em,

  // Individual tabs
  'TabItem__height': 35px,
  // An explicit height is defined by our design system
  'TabItem____gap': 0.5em,
  'TabItem____cursor': pointer,
  'TabItem--disabled____cursor': not-allowed,
  'TabItem____padding': 0 1em,
  'TabItem____padding--tight': 0 0.5em,
  'TabItem____border-radius': var(--radius--med),
  'TabItem____font-size': var(--font-size--base),
  'TabItem____font-weight': 400,
  'TabItem--selected____font-weight': 600,

  // Badge within tab
  'TabBadge____padding': 2px 0.75em,
  'TabBadge____border-radius': var(--radius--pill),
  'TabBadge____font-size': var(--font-size--s),
  'TabBadge____font-weight': 500
);

$default-color-variables: (
  // Individual tabs
  'TabItem____bg-color': transparent,
  'TabItem____color': var(--color--gray-800),
  'TabItem--disabled____color': var(--color--gray-300),
  'TabItem--disabled____bg-color': transparent,
  'TabItem--hover____bg-color': var(--color--gray-50),
  'TabItem--pressed____bg-color': var(--color--gray-100),
  'TabItem--selected____bg-color': var(--color--gray-50),
  // AI theme (still in progress)
  'TabItem--ai-hover____bg-color': var(--color--ai-pink-50),
  'TabItem--ai-pressed____bg-color': var(--color--ai-pink-50)
    var(--gradient--ai-light-a),
  // AI designs are currently missing a pressed state
  'TabItem--ai-selected____bg-color': var(--color--ai-pink-50)
    var(--gradient--ai-light-a),
  // Badge within tab
  'TabBadge____bg-color': var(--color--gray-25),
  // AI theme
  'TabBadge--ai____bg-color': var(--color--white)
    linear-gradient(to bottom, #f7f1ff, #fff8fc),
  'TabBadge--ai-interacted____bg-color': var(--color--white)
);

@mixin generate-tabs-theme-variables($theme-variables: ()) {
  $variables: map-merge($default-variables, $theme-variables);

  @each $name, $value in $variables {
    --#{$name}: #{$value};
  }
}

@mixin generate-tabs-color-variables($color-variables: ()) {
  $variables: map-merge($default-color-variables, $color-variables);

  @each $name, $value in $variables {
    --#{$name}: #{$value};
  }
}