$default-variables: (
  'AddButton____display': flex,
  'AddButton____alignment': center,
  'AddButton____justification': center,
  'AddButton____flex-gap': 0.5em,

  'AddButton____font-weight': var(--font-weight--semibold),
  'AddButton____font-size': var(--font-size--base),
  'AddButton____radius': var(--radius--med),
  'AddButton____transition-duration': var(--timing--hover),
  'AddButton____border-width': 1px,
  'AddButton____border-style': 'dashed',
  'AddButton____outline-offset': 2px,

  'AddButton____cursor': pointer,
  'AddButton--disabled____cursor': default,

  // Collapsed variant padding
  'AddButton--collapsed____padding': 1em 0,

  // Short variant padding
  'AddButton--short____padding': 1em 0,

  // Tall variant padding
  'AddButton--tall____padding': 3em 0,
);

$default-color-variables: (
  // Default state
  'AddButton____bg-color': var(--color--white),
  'AddButton____border-color': var(--color--gray-200),
  'AddButton____color': var(--color--blue-500),

  // Hover state
  'AddButton--hover____bg-color': var(--color--blue-50),
  'AddButton--hover____border-color': var(--color--blue-600),
  'AddButton--hover____color': var(--color--blue-600),

  // Active/pressed state
  'AddButton--active____bg-color': var(--color--blue-100),
  'AddButton--active____border-color': var(--color--blue-700),
  'AddButton--active____color': var(--color--blue-700),

  // Disabled state
  'AddButton--disabled____bg-color': var(--color--white),
  'AddButton--disabled____border-color': var(--color--gray-200),
  'AddButton--disabled____color': var(--color--gray-500),
);

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

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

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

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