$default-variables: (
  "Button-Mode____padding": var(--Button--small____padding),
  "Button-Mode____horizontal-padding": var(--Button--tight____padding),
  "Button-Mode____font-weight": var(--Button____font-weight),
  "Button-Mode____font-size": var(--font-size--base),

  // Default/inactive styles
  // Based on color--none styles
  "Button-Mode____bg-color": transparent,
  "Button-Mode____color": var(--color--gray-1),

  "Button-Mode--hover____bg-color": rgba(var(--color--main-rgb), 0.05),
  "Button-Mode--hover____color":  var(--color--main),

  "Button-mode--active____color": var(--color--main),
  "Button-mode--active____bg-color": var(--color--gray-5),

  // Selected styles
  // Based on color--dscout + button glass styles
  "Button-Mode--selected____bg-color": var(--color--gray-5),
  "Button-Mode--selected____color": var(--color--main),

  "Button-Mode--selected--hover____bg-color": var(--color--gray-5),
  "Button-Mode--selected--hover____color": var(--color--main),

  "Button-Mode--selected--active____bg-color": var(--color--gray-5),
  "Button-Mode--selected--active____color": var(--color--main),
);

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

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