@use "~@codecademy/gamut-styles/utils" as *;

$btn-padding-x: px-rem(16) !default;
$btn-padding-y: 0.375rem !default;
$btn-font-weight: bold !default;

$btn-line-height: 1.5 !default;
$btn-line-height-lg: calc(4 / 3) !default;
$btn-line-height-sm: 1.5 !default;

$btn-font-size-base: px-rem(16) !default;
$btn-font-size-lg: px-rem(20) !default;
$btn-font-size-sm: px-rem(16) !default;
$btn-font-size-xs: 0.75rem !default;

$btn-padding-x-sm: 0.75rem !default;
$btn-padding-y-sm: 0.25rem !default;
$btn-min-width-sm: px-rem(128) !default;

$btn-padding-x-lg: 1.25rem !default;
$btn-padding-y-lg: 0.75rem !default;
$btn-min-width-lg: px-rem(160) !default;

$btn-border-radius: 2px !default;
$btn-round-border-radius: 50px !default;

$btn-state-modifier: 20% !default;
$btn-color-modifier: 10% !default;
$btn-outline-hover-state-modifier: 0.9 !default;
$btn-outline-active-state-modifier: 0.6 !default;
$btn-box-shadow-focus-modifier: 0.5 !default;

$btn-disabled-color: $color-gray-600;
$btn-box-shadow-color: rgba(0, 0, 0, 0.3);

$btn-swatches: (
  // Gamut Next
  "hyper": $color-hyper,
  "red": $color-red,
  "navy": $color-navy,
  "white": $color-white,
  "grey": $color-gray-300,
  // Gamut Classic
  "brand-blue": $color-blue-500,
  "brand-red": $brand-red,
  "brand-yellow": $brand-yellow,
  "brand-purple": $brand-purple,
  "brand-dark-blue": $brand-dark-blue,
  // Editor
  "mint": $deprecated-swatches-mint-700,
  "darkmint": $deprecated-swatches-mint-800,
  "greyblue": $deprecated-swatches-grey-blue-600
);