// The button defaults to the primary variant and medium styling so are not added as classes - they live on the default `button` styling
$button-large: (
  'font-size': 18,
  'padding-top': 14,
  'padding-top_new': 20,
  'padding-horizontal': 24,
  'padding-horizontal_new': 113,
  'padding-bottom': 16,
  'padding-bottom_new': 24,
  'icon-width': 18,
  'icon-offset': 2,
  'icon-gutter': 12,
);
$button-medium: (
  'font-size': 16,
  'padding-top': 10,
  'padding-top_new': 14,
  'padding-horizontal': 24,
  'padding-horizontal_new': 65,
  'padding-bottom': 12,
  'padding-bottom_new': 16,
  'icon-width': 16,
  'icon-offset': 2,
  'icon-gutter': 10,
);
$button-small: (
  'font-size': 14,
  'padding-top': 8,
  'padding-top_new': 10,
  'padding-horizontal': 16,
  'padding-horizontal_new': 35,
  'padding-bottom': 10,
  'padding-bottom_new': 12,
  'icon-width': 12,
  'icon-offset': 2,
  'icon-gutter': 8,
);
$sizes: ('large', $button-large), ('small', $button-small);
$secondary: (
  'border': 1,
);
$secondary-destruction: (
  'right': -5%,
  'offset': -1,
);

// The tertiary styling has its own padding; regardless of size, we add a tiny amount of padding to accommodate
// the focus outline and to ensure any icons are centered
$tertiary: (
  'padding-top': 1.6,
  'padding-horizontal': 8,
  'padding-bottom': 3.2,
);
$animation: (
  'duration': 0.2,
);
$animation-bounce: (
  'scale': 1.1,
  'duration': 0.5,
  'iteration': 1,
);
