@mixin buttonBase {
  color: var(--g-controlTextColor) !important;
  border: none !important;
  border-radius: 0.5rem !important;
  box-shadow: 0px 0px 1px rgba(var(--g-shadowColor--rgb), 0.3),
    0px 1px 1.5px rgba(var(--g-shadowColor--rgb), 0.15);
  background-color: var(--g-controlColor) !important;
  cursor: default !important;
  margin: revert !important;
  height: 1.9rem !important;
  line-height: 1.9rem !important;
  min-width: 7.2rem !important;
  min-height: 0 !important;
  font-size: 1.4rem !important;
  font-weight: 400 !important;
  padding: 0 2rem !important;
  text-decoration: none !important;

  &:active {
    color: rgba(255, 255, 255, 0.75) !important;
    background-image: linear-gradient(
      hsl(
        var(--s-accentColor--h),
        var(--s-accentColor--s),
        calc(var(--s-accentColor--l) - 5%)
      ),
      hsl(
        var(--s-accentColor--h),
        var(--s-accentColor--s),
        calc(var(--s-accentColor--l) - 10%)
      )
    );
  }
}

@mixin buttonPrimary {
  color: var(--g-alternateSelectedControlTextColor) !important;
  background-color: hsl(var(--s-accentColor--hsl));
  background-image: linear-gradient(
    hsl(var(--s-accentColor--hsl)),
    hsl(var(--s-accentColor--hs), calc(var(--s-accentColor--l) - 5%))
  );
  box-shadow: 0px 0px 1px hsla(var(--s-accentColor--hsl), 0.3),
    0px 1px 1.5px hsla(var(--s-accentColor--hsl), 0.15);
}
