// General
$button-base-background: var(--sd-sys-color-button-primary-background) !default;
$button-base-background-hover: var(--sd-sys-color-button-primary-background-hover) !default;
$button-base-background-focus: var(--sd-sys-color-button-primary-background-focus) !default;
$button-base-border-color: transparent !default;
$button-base-outline-color: var(--sd-sys-color-button-primary-outline) !default;
$button-base-color: var(--sd-sys-color-button-primary-color) !default;
$button-base-color-hover: var(--sd-sys-color-button-primary-color-hover) !default;
$button-base-color-focus: var(--sd-sys-color-button-primary-color-focus) !default;
$button-base-icon-color: var(--sd-sys-color-button-primary-icon) !default;
$button-base-label-color: var(--sd-sys-color-button-primary-label) !default;

// Outline
$button-outline-background: var(--sd-sys-color-button-secondary-background) !default;
$button-outline-background-hover: var(--sd-sys-color-button-secondary-background-hover) !default;
$button-outline-background-focus: var(--sd-sys-color-button-secondary-background-focus) !default;
$button-outline-border-color: var(--sd-sys-color-button-secondary-border) !default;
$button-outline-outline-color: var(--sd-sys-color-button-secondary-outline) !default;
$button-outline-color: var(--sd-sys-color-button-secondary-color) !default;
$button-outline-color-hover: var(--sd-sys-color-button-secondary-color-hover) !default;
$button-outline-color-focus: var(--sd-sys-color-button-secondary-color-focus) !default;
$button-outline-icon-color: var(--sd-sys-color-button-secondary-color) !default;
$button-outline-label-color: var(--sd-sys-color-button-secondary-color) !default;

// Sizes
$button-sizes: (
  xs: (
    padding-top: 6px,
    padding-bottom: 6px,
    padding-start: 12px,
    padding-end: 12px,
    height: 32px,
    font-size: 12px,
    line-height: 12px,
    icon-size: 16px,
    content-margin-bottom: 0
  ),
  sm: (
    padding-top: 8px,
    padding-bottom: 8px,
    padding-start: 14px,
    padding-end: 14px,
    height: 36px,
    font-size: 14px,
    line-height: 18px,
    icon-size: 18px,
    content-margin-bottom: 1px
  ),
  md: (
    padding-top: 10px,
    padding-bottom: 10px,
    padding-start: 16px,
    padding-end: 16px,
    height: 40px,
    font-size: 14px,
    line-height: 18px,
    icon-size: 20px,
    content-margin-bottom: 1px
  ),
  lg: (
    padding-top: 10px,
    padding-bottom: 10px,
    padding-start: 18px,
    padding-end: 18px,
    height: 44px,
    font-size: 16px,
    line-height: 24px,
    icon-size: 22px,
    content-margin-bottom: 0
  ),
  xl: (
    padding-top: 12px,
    padding-bottom: 12px,
    padding-start: 20px,
    padding-end: 20px,
    height: 48px,
    font-size: 18px,
    line-height: 22px,
    icon-size: 24px,
    content-margin-bottom: 0
  )
) !default;