/**
 * @prop --bal-button-font-size: TBD
 * @prop --bal-button-line-height: TBD
 * @prop --bal-button-font-family: TBD
 * @prop --bal-button-font-weight: TBD
 * @prop --bal-button-radius: TBD
 * @prop --bal-button-border-style: TBD
 * @prop --bal-button-border-width: TBD
 * @prop --bal-button-border-color: TBD
 * @prop --bal-button-border-color-hover: TBD
 * @prop --bal-button-border-color-active: TBD
 * @prop --bal-button-color: TBD
 * @prop --bal-button-color-hover: TBD
 * @prop --bal-button-color-active: TBD
 * @prop --bal-button-background: TBD
 * @prop --bal-button-background-hover: TBD
 * @prop --bal-button-background-active: TBD
 * @prop --bal-button-small-font-size: TBD
 * @prop --bal-button-primary-color: TBD
 * @prop --bal-button-primary-color-hover: TBD
 * @prop --bal-button-primary-color-active: TBD
 * @prop --bal-button-primary-border-color: TBD
 * @prop --bal-button-primary-border-color-hover: TBD
 * @prop --bal-button-primary-border-color-active: TBD
 * @prop --bal-button-primary-background: TBD
 * @prop --bal-button-primary-background-hover: TBD
 * @prop --bal-button-primary-background-active: TBD
 * @prop --bal-button-text-border-color-hover: TBD
 * @prop --bal-button-text-border-color-active: TBD
 * @prop --bal-button-text-background-hover: TBD
 * @prop --bal-button-text-background-active: TBD
 * @prop --bal-button-light-color: TBD
 * @prop --bal-button-light-color-hover: TBD
 * @prop --bal-button-light-color-active: TBD
 * @prop --bal-button-light-border-color: TBD
 * @prop --bal-button-light-border-color-hover: TBD
 * @prop --bal-button-light-border-color-active: TBD
 * @prop --bal-button-light-background: TBD
 * @prop --bal-button-light-background-hover: TBD
 * @prop --bal-button-light-background-active: TBD
 * @prop --bal-button-success-color: TBD
 * @prop --bal-button-success-color-hover: TBD
 * @prop --bal-button-success-color-active: TBD
 * @prop --bal-button-success-border-color: TBD
 * @prop --bal-button-success-border-color-hover: TBD
 * @prop --bal-button-success-border-color-active: TBD
 * @prop --bal-button-success-background: TBD
 * @prop --bal-button-success-background-hover: TBD
 * @prop --bal-button-success-background-active: TBD
 * @prop --bal-button-warning-color: TBD
 * @prop --bal-button-warning-color-hover: TBD
 * @prop --bal-button-warning-color-active: TBD
 * @prop --bal-button-warning-border-color: TBD
 * @prop --bal-button-warning-border-color-hover: TBD
 * @prop --bal-button-warning-border-color-active: TBD
 * @prop --bal-button-warning-background: TBD
 * @prop --bal-button-warning-background-hover: TBD
 * @prop --bal-button-warning-background-active: TBD
 * @prop --bal-button-danger-color: TBD
 * @prop --bal-button-danger-color-hover: TBD
 * @prop --bal-button-danger-color-active: TBD
 * @prop --bal-button-danger-border-color: TBD
 * @prop --bal-button-danger-border-color-hover: TBD
 * @prop --bal-button-danger-border-color-active: TBD
 * @prop --bal-button-danger-background: TBD
 * @prop --bal-button-danger-background-hover: TBD
 * @prop --bal-button-danger-background-active: TBD
 * @prop --bal-button-disabled-color: TBD
 * @prop --bal-button-disabled-border-color: TBD
 * @prop --bal-button-disabled-background: TBD
 * @prop --bal-button-inverted-color: TBD
 * @prop --bal-button-inverted-color-hover: TBD
 * @prop --bal-button-inverted-color-active: TBD
 * @prop --bal-button-inverted-border-color: TBD
 * @prop --bal-button-inverted-border-color-hover: TBD
 * @prop --bal-button-inverted-border-color-active: TBD
 * @prop --bal-button-inverted-background: TBD
 * @prop --bal-button-inverted-background-hover: TBD
 * @prop --bal-button-inverted-background-active: TBD
 * @prop --bal-button-inverted-primary-color: TBD
 * @prop --bal-button-inverted-primary-color-hover: TBD
 * @prop --bal-button-inverted-primary-color-active: TBD
 * @prop --bal-button-inverted-primary-border-color: TBD
 * @prop --bal-button-inverted-primary-border-color-hover: TBD
 * @prop --bal-button-inverted-primary-border-color-active: TBD
 * @prop --bal-button-inverted-primary-background: TBD
 * @prop --bal-button-inverted-primary-background-hover: TBD
 * @prop --bal-button-inverted-primary-background-active: TBD
 * @prop --bal-button-inverted-text-color: TBD
 * @prop --bal-button-inverted-text-color-hover: TBD
 * @prop --bal-button-inverted-text-color-active: TBD
 * @prop --bal-button-inverted-text-border-color: TBD
 * @prop --bal-button-inverted-text-border-color-hover: TBD
 * @prop --bal-button-inverted-text-border-color-active: TBD
 * @prop --bal-button-inverted-text-background: TBD
 * @prop --bal-button-inverted-text-background-hover: TBD
 * @prop --bal-button-inverted-text-background-active: TBD
 * @prop --bal-button-inverted-light-color: TBD
 * @prop --bal-button-inverted-light-color-hover: TBD
 * @prop --bal-button-inverted-light-color-active: TBD
 * @prop --bal-button-inverted-light-border-color: TBD
 * @prop --bal-button-inverted-light-border-color-hover: TBD
 * @prop --bal-button-inverted-light-border-color-active: TBD
 * @prop --bal-button-inverted-light-background: TBD
 * @prop --bal-button-inverted-light-background-hover: TBD
 * @prop --bal-button-inverted-light-background-active: TBD
 */

:root
  --bal-button-font-size: var(--bal-text-size-normal)
  --bal-button-line-height: var(--bal-line-height-normal)
  --bal-button-font-family: var(--bal-font-family-title)
  --bal-button-font-weight: var(--bal-font-weight-bold)
  --bal-button-radius: var(--bal-radius-normal)
  --bal-button-border-style: solid
  --bal-button-border-width: var(--bal-border-width-normal)
  --bal-button-border-color: var(--bal-color-border-primary)
  --bal-button-border-color-hover: var(--bal-color-border-primary-hovered)
  --bal-button-border-color-active: var(--bal-color-border-primary-pressed)
  --bal-button-color: var(--bal-color-text-primary)
  --bal-button-color-hover: var(--bal-color-text-primary-hovered)
  --bal-button-color-active: var(--bal-color-text-primary-pressed)
  --bal-button-background: transparent
  --bal-button-background-hover: var(--bal-color-light-blue)
  --bal-button-background-active: var(--bal-color-light-blue)
  //
  // small button
  --bal-button-small-font-size: var(--bal-text-size-small)
  //
  // primary
  --bal-button-primary-color: var(--bal-color-text-white)
  --bal-button-primary-color-hover: var(--bal-color-text-white)
  --bal-button-primary-color-active: var(--bal-color-text-white)
  --bal-button-primary-border-color: var(--bal-color-border-primary)
  --bal-button-primary-border-color-hover: var(--bal-color-border-primary-hovered)
  --bal-button-primary-border-color-active: var(--bal-color-border-primary-pressed)
  --bal-button-primary-background: var(--bal-color-primary)
  --bal-button-primary-background-hover: var(--bal-color-light-blue-5)
  --bal-button-primary-background-active: var(--bal-color-primary-6)
  //
  // text
  --bal-button-text-border-color-hover: var(--bal-color-light-blue)
  --bal-button-text-border-color-active: var(--bal-color-light-blue)
  --bal-button-text-background-hover: var(--bal-color-light-blue)
  --bal-button-text-background-active: var(--bal-color-light-blue)
  //
  // light
  --bal-button-light-color: var(--bal-color-text-primary)
  --bal-button-light-color-hover: var(--bal-color-text-primary)
  --bal-button-light-color-active: var(--bal-color-text-primary)
  --bal-button-light-border-color: var(--bal-color-grey-2)
  --bal-button-light-border-color-hover: var(--bal-color-light-blue-1)
  --bal-button-light-border-color-active: var(--bal-color-light-blue-2)
  --bal-button-light-background: var(--bal-color-grey-2)
  --bal-button-light-background-hover: var(--bal-color-light-blue-1)
  --bal-button-light-background-active: var(--bal-color-light-blue-2)
  //
  // tertiary-purple
  --bal-button-tertiary-purple-color: var(--bal-color-text-primary)
  --bal-button-tertiary-purple-color-hover: var(--bal-color-text-primary)
  --bal-button-tertiary-purple-color-active: var(--bal-color-text-primary-pressed)
  --bal-button-tertiary-purple-border-color: var(--bal-color-purple-1)
  --bal-button-tertiary-purple-border-color-hover: var(--bal-color-purple-5)
  --bal-button-tertiary-purple-border-color-active: var(--bal-color-purple-6)
  --bal-button-tertiary-purple-background: var(--bal-color-purple-1)
  --bal-button-tertiary-purple-background-hover: var(--bal-color-purple-1)
  --bal-button-tertiary-purple-background-active: var(--bal-color-purple-1)
  //
  // tertiary-red
  --bal-button-tertiary-red-color: var(--bal-color-text-primary)
  --bal-button-tertiary-red-color-hover: var(--bal-color-text-primary)
  --bal-button-tertiary-red-color-active: var(--bal-color-text-primary-pressed)
  --bal-button-tertiary-red-border-color: var(--bal-color-red-1)
  --bal-button-tertiary-red-border-color-hover: var(--bal-color-red-5)
  --bal-button-tertiary-red-border-color-active: var(--bal-color-red-6)
  --bal-button-tertiary-red-background: var(--bal-color-red-1)
  --bal-button-tertiary-red-background-hover: var(--bal-color-red-1)
  --bal-button-tertiary-red-background-active: var(--bal-color-red-1)
  //
  // tertiary-yellow
  --bal-button-tertiary-yellow-color: var(--bal-color-text-primary)
  --bal-button-tertiary-yellow-color-hover: var(--bal-color-text-primary)
  --bal-button-tertiary-yellow-color-active: var(--bal-color-text-primary-pressed)
  --bal-button-tertiary-yellow-border-color: var(--bal-color-yellow-1)
  --bal-button-tertiary-yellow-border-color-hover: var(--bal-color-yellow-5)
  --bal-button-tertiary-yellow-border-color-active: var(--bal-color-yellow-6)
  --bal-button-tertiary-yellow-background: var(--bal-color-yellow-1)
  --bal-button-tertiary-yellow-background-hover: var(--bal-color-yellow-1)
  --bal-button-tertiary-yellow-background-active: var(--bal-color-yellow-1)
  //
  // tertiary-green
  --bal-button-tertiary-green-color: var(--bal-color-text-primary)
  --bal-button-tertiary-green-color-hover: var(--bal-color-text-primary)
  --bal-button-tertiary-green-color-active: var(--bal-color-text-primary-pressed)
  --bal-button-tertiary-green-border-color: var(--bal-color-green-1)
  --bal-button-tertiary-green-border-color-hover: var(--bal-color-green-5)
  --bal-button-tertiary-green-border-color-active: var(--bal-color-green-6)
  --bal-button-tertiary-green-background: var(--bal-color-green-1)
  --bal-button-tertiary-green-background-hover: var(--bal-color-green-1)
  --bal-button-tertiary-green-background-active: var(--bal-color-green-1)
  //
  // success
  --bal-button-success-color: var(--bal-color-text-primary)
  --bal-button-success-color-hover: var(--bal-color-text-white)
  --bal-button-success-color-active: var(--bal-color-text-white)
  --bal-button-success-border-color: var(--bal-color-success-5)
  --bal-button-success-border-color-hover: var(--bal-color-success-5)
  --bal-button-success-border-color-active: var(--bal-color-success-6)
  --bal-button-success-background: var(--bal-color-success-1)
  --bal-button-success-background-hover: var(--bal-color-success-5)
  --bal-button-success-background-active: var(--bal-color-success-6)
  //
  // warning
  --bal-button-warning-color: var(--bal-color-text-primary)
  --bal-button-warning-color-hover: var(--bal-color-text-primary)
  --bal-button-warning-color-active: var(--bal-color-text-primary)
  --bal-button-warning-border-color: var(--bal-color-warning-5)
  --bal-button-warning-border-color-hover: var(--bal-color-warning-3)
  --bal-button-warning-border-color-active: var(--bal-color-warning-4)
  --bal-button-warning-background: var(--bal-color-warning-1)
  --bal-button-warning-background-hover: var(--bal-color-warning-3)
  --bal-button-warning-background-active: var(--bal-color-warning-4)
  //
  // danger
  --bal-button-danger-color: var(--bal-color-text-primary)
  --bal-button-danger-color-hover: var(--bal-color-text-white)
  --bal-button-danger-color-active: var(--bal-color-text-white)
  --bal-button-danger-border-color: var(--bal-color-danger-5)
  --bal-button-danger-border-color-hover: var(--bal-color-danger-5)
  --bal-button-danger-border-color-active: var(--bal-color-danger-6)
  --bal-button-danger-background: var(--bal-color-danger-1)
  --bal-button-danger-background-hover: var(--bal-color-danger-5)
  --bal-button-danger-background-active: var(--bal-color-danger-6)
  //
  // disabled
  --bal-button-disabled-color: var(--bal-color-text-grey)
  --bal-button-disabled-border-color: var(--bal-color-grey)
  --bal-button-disabled-background: var(--bal-color-grey)
  //
  // inverted
  --bal-button-inverted-color: var(--bal-color-text-white)
  --bal-button-inverted-color-hover: var(--bal-color-text-white)
  --bal-button-inverted-color-active: var(--bal-color-text-white)
  --bal-button-inverted-border-color: var(--bal-color-border-inverted)
  --bal-button-inverted-border-color-hover: var(--bal-color-light-blue-3)
  --bal-button-inverted-border-color-active: var(--bal-color-light-blue-5)
  --bal-button-inverted-background: transparent
  --bal-button-inverted-background-hover: var(--bal-color-primary-3)
  --bal-button-inverted-background-active: var(--bal-color-primary-3)
  //
  // inverted primary
  --bal-button-inverted-primary-color: var(--bal-color-text-primary)
  --bal-button-inverted-primary-color-hover: var(--bal-color-text-primary)
  --bal-button-inverted-primary-color-active: var(--bal-color-text-white)
  --bal-button-inverted-primary-border-color: var(--bal-color-border-inverted)
  --bal-button-inverted-primary-border-color-hover: var(--bal-color-light-blue-2)
  --bal-button-inverted-primary-border-color-active: var(--bal-color-light-blue-5)
  --bal-button-inverted-primary-background: var(--bal-color-white)
  --bal-button-inverted-primary-background-hover: var(--bal-color-light-blue-2)
  --bal-button-inverted-primary-background-active: var(--bal-color-light-blue-5)
  //
  // inverted text
  --bal-button-inverted-text-color: var(--bal-color-text-white)
  --bal-button-inverted-text-color-hover: var(--bal-color-light-blue-2)
  --bal-button-inverted-text-color-active: var(--bal-color-info-3)
  --bal-button-inverted-text-border-color: transparent
  --bal-button-inverted-text-border-color-hover: transparent
  --bal-button-inverted-text-border-color-active: transparent
  --bal-button-inverted-text-background: transparent
  --bal-button-inverted-text-background-hover: transparent
  --bal-button-inverted-text-background-active: transparent
  //
  // inverted light
  --bal-button-inverted-light-color: var(--bal-color-text-white)
  --bal-button-inverted-light-color-hover: var(--bal-color-text-primary)
  --bal-button-inverted-light-color-active: var(--bal-color-text-primary)
  --bal-button-inverted-light-border-color: var(--bal-color-primary-4)
  --bal-button-inverted-light-border-color-hover: var(--bal-color-light-blue-2)
  --bal-button-inverted-light-border-color-active: var(--bal-color-white)
  --bal-button-inverted-light-background: var(--bal-color-primary-4)
  --bal-button-inverted-light-background-hover: var(--bal-color-light-blue-2)
  --bal-button-inverted-light-background-active: var(--bal-color-white)