@use '../../../functions/units';

$default-variables: (
  "ModernButton____font-weight": var(--font-weight--semibold),
  "ModernButton____line-height": var(--line-height--copy),
  "ModernButton____padding": 0.5em 1em,
  "ModernButton--small____padding": 0.25em 1em,
  "ModernButton____radius": var(--radius--med),
  "ModernButton____transition-duration": var(--timing--hover),
  "ModernButton--icon-only____padding": units.calc-em(9.5),
  "ModernButton--small-icon-only____padding": units.calc-em(6),
  "ModernButton--outlined____border-width": 1px,
  "ModernButton____font-size": var(--font-size--base),
);

$default-color-variables: (
  // Filled button bg
  "ModernButton--filled____bg-color": var(--color--main),
  "ModernButton--filled--hover____bg-color": #000,
  "ModernButton--filled--active____bg-color": #000,
  "ModernButton--filled--disabled____bg-color": var(--color--gray-300),

  // Filled button color
  "ModernButton--filled____color": var(--color--invert),
  "ModernButton--filled--hover____color": var(--ModernButton--filled____color),
  "ModernButton--filled--active____color": var(--ModernButton--filled____color),
  "ModernButton--filled--disabled____color": var(--color--invert),

  // Ghost button bg
  "ModernButton--ghost____bg-color": transparent,
  "ModernButton--ghost--hover____bg-color": var(--color--gray-50),
  "ModernButton--ghost--active____bg-color": var(--color--gray-100),
  "ModernButton--ghost--disabled____bg-color": transparent,

  // Ghost button color
  "ModernButton--ghost____color": var(--color--main),
  "ModernButton--ghost--hover____color": var(--ModernButton--ghost____color),
  "ModernButton--ghost--active____color": var(--ModernButton--ghost____color),
  "ModernButton--ghost--disabled____color": var(--color--gray-500),

  // Outlined button border
  "ModernButton--outlined____b-color": var(--color--gray-300),
  "ModernButton--outlined--hover____b-color": var(--color--gray-500),
  "ModernButton--outlined--active____b-color": var(--color--gray-800),
  "ModernButton--outlined--disabled____b-color": var(--color--gray-200),

  // Outlined button bg
  "ModernButton--outlined____bg-color": transparent,
  "ModernButton--outlined--hover____bg-color": transparent,
  "ModernButton--outlined--active____bg-color": transparent,
  "ModernButton--outlined--disabled____bg-color": transparent,

  // Outlined button color
  "ModernButton--outlined____color": var(--color--main),
  "ModernButton--outlined--hover____color": var(--color--main),
  "ModernButton--outlined--active____color": var(--color--main),
  "ModernButton--outlined--disabled____color": var(--color--gray-300)
);

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

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

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

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