@use '../../styles/settings/palette';
@use '../../styles/tools/' as *;

$button: () !default;
$button: map-deep-merge(
  (
    light: (
      button-primary-background: var(--sd-palette-primary-600),
      button-primary-background-hover: var(--sd-palette-primary-700),
      button-primary-background-focus: var(--sd-palette-primary-500),
      button-primary-border: var(--sd-palette-primary-600),
      button-primary-color: var(--sd-palette-shades-white),
      button-primary-color-hover: var(--sd-palette-shades-white),
      button-primary-color-focus: var(--sd-palette-shades-white),
      button-primary-outline: convert-hex-to-rgba(palette.$primary, light, 500, .15),

      button-secondary-background: var(--sd-palette-shades-white),
      button-secondary-background-hover: var(--sd-palette-gray-50),
      button-secondary-background-focus: var(--sd-palette-gray-25),
      button-secondary-border: var(--sd-palette-gray-300),
      button-secondary-color: var(--sd-palette-gray-700),
      button-secondary-color-hover: var(--sd-palette-gray-800),
      button-secondary-color-focus: var(--sd-palette-gray-700),
      button-secondary-outline: convert-hex-to-rgba(palette.$gray, light, 400, .15)
    ),
    dark: (
      button-primary-background: var(--sd-palette-primary-700),
      button-primary-background-hover: var(--sd-palette-primary-800),
      button-primary-background-focus: var(--sd-palette-primary-600),
      button-primary-border: var(--sd-palette-primary-600),
      button-primary-color: var(--sd-palette-shades-white),
      button-primary-color-hover: var(--sd-palette-shades-white),
      button-primary-color-focus: var(--sd-palette-shades-white),
      button-primary-outline: convert-hex-to-rgba(palette.$primary, dark, 500, .15),

      button-secondary-background: var(--sd-palette-gray-700),
      button-secondary-background-hover: var(--sd-palette-gray-800),
      button-secondary-background-focus: var(--sd-palette-gray-600),
      button-secondary-border: var(--sd-palette-gray-600),
      button-secondary-color: var(--sd-palette-shades-white),
      button-secondary-color-hover: var(--sd-palette-shades-white),
      button-secondary-color-focus: var(--sd-palette-shades-white),
      button-secondary-outline: convert-hex-to-rgba(palette.$gray, dark, 500, .15)
    )
  ),
  $button
);


$system-packs: () !default;
$system-packs: map-deep-merge(
  (
    'button': $button
  ),
  $system-packs
);