$default-variables: (
  "Button____font-weight": var(--font-weight--semibold),
  "Button____line-height": var(--line-height--copy),
  "Button____padding": 0.5em 1em,
  "Button____radius": var(--radius--med),
  "Button____transition-duration": var(--timing--hover),

  "Button--outline____border-width": 1px,

  "Button--tiny____font-size": var(--font-size--xs),
  "Button--tiny____padding": .25em 1em,
  "Button--tiny____radius": var(--radius--small),

  "Button--small____font-size": var(--font-size--s),
  "Button--small____padding": .25em 1em,
  "Button--small____radius": var(--radius--small),

  "Button--big____font-size": var(--font-size--l),
  "Button--big____radius": var(--radius--small),
  "Button--big____padding": .75em 2em,

  "Button--tight____padding": .75em,
);

$default-color-variables: (
  "Button____bg-color": var(--color--main),
  "Button--hover____bg-color": rgba(var(--color--main-rgb), .9),
  "Button--active____bg-color": rgba(var(--color--main-rgb), .85),

  "Button____color": var(--color--invert),
  "Button--hover____color": var(--Button____color),
  "Button--active____color": var(--Button____color),

  "Button--glass____bg-color": rgba(var(--color--main-rgb), .1),
  "Button--glass--hover____bg-color": rgba(var(--color--main-rgb), .2),
  "Button--glass--active____bg-color": rgba(var(--color--main-rgb), .25),

  "Button--glass____color": var(--color--main),
  "Button--glass--hover____color": var(--Button--glass____color),
  "Button--glass--active____color": var(--Button--glass____color),

  "Button--outline____b-color": rgba(var(--color--main-rgb), .2),
  "Button--outline--hover____b-color": rgba(var(--color--main-rgb), .5),
  "Button--outline--active____b-color": rgba(var(--color--main-rgb), .6275),

  "Button--outline____color": var(--color--main)
);

@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};
  }
}