// stylelint-disable length-zero-no-unit

@use 'sass:map';
@use '../index' as *;

$button: (
  radius: 2px,
  font: var(--f-ui-m),
  shadow: none,
  min-height: 2.75rem,
  padding-horizontal: var(--s-m),
  padding-vertical: var(--s-xs),
  line-height-icon: map.get($line-height-ui, 'm'),
  primary: (
    background: var(--c-p),
    color: map.get($color, 'white'),
    border-color: var(--c-p),
    border-width: 0px,
    background-hover: var(--c-p-140),
    color-hover: map.get($color, 'white'),
    border-color-hover: var(--c-p-140),
    background-active: var(--c-p-160),
    color-active: map.get($color, 'white'),
    border-color-active: var(--c-p-160),
    background-focus: var(--c-p),
    color-focus: map.get($color, 'white'),
    border-color-focus: var(--c-p),
    outline-color: map.get($color, 'white'),
    outline-offset: -3px,
    outline-width: 1px,
  ),
  secondary: (
    background: map.get($color, 'white'),
    color: var(--c-p),
    border-color: var(--c-p),
    border-width: 2px,
    background-hover: var(--c-p-140),
    color-hover: map.get($color, 'white'),
    border-color-hover: var(--c-p-140),
    background-active: var(--c-p-160),
    color-active: map.get($color, 'white'),
    border-color-active: var(--c-p-160),
    background-focus: var(--c-p-160),
    color-focus: map.get($color, 'white'),
    border-color-focus: var(--c-p-160),
    outline-color: map.get($color, 'white'),
    outline-offset: -3px,
    outline-width: 1px,
    focus-shadow: none,
  ),
  tertiary: (
    background: transparent,
    color: var(--c-d),
    border-color: transparent,
    border-width: 1px,
    background-hover: var(--c-p-20),
    color-hover: var(--c-d),
    border-color-hover: var(--c-d-80),
    background-active: var(--c-n),
    color-active: var(--c-d),
    border-color-active: var(--c-n),
    background-focus: map.get($color, 'white'),
    color-focus: var(--c-d),
    border-color-focus: var(--c-p),
    outline-color: var(--c-p),
    outline-offset: -2px,
    outline-width: 2px,
  ),
  cta: (
    background: var(--c-s-80),
    color: var(--c-d),
    border-color: var(--c-s-80),
    border-width: 0px,
    background-hover: var(--c-s-120),
    color-hover: var(--c-d),
    border-color-hover: var(--c-s-120),
    background-active: var(--c-s-140),
    color-active: var(--c-d),
    border-color-active: var(--c-s-140),
    background-focus: var(--c-s-80),
    color-focus: var(--c-d),
    border-color-focus: var(--c-s-80),
    outline-color: var(--c-d),
    outline-offset: -3px,
    outline-width: 1px,
  ),
  ghost: (
    background: transparent,
    color: var(--c-p),
    border-color: transparent,
    border-width: 1px,
    background-hover: var(--c-n-60),
    color-hover: var(--c-d),
    border-color-hover: var(--c-d-80),
    background-active: var(--c-n-80),
    color-active: var(--c-d),
    border-color-active: var(--c-n-80),
    background-focus: transparent,
    color-focus: var(--c-p),
    border-color-focus: var(--c-p),
    outline-color: var(--c-p),
    outline-offset: -2px,
    outline-width: 2px,
  ),
  ghost-inverted: (
    background: transparent,
    color: map.get($color, 'white'),
    border-color: transparent,
    border-width: 0px,
    background-hover: var(--c-p-20),
    color-hover: var(--c-d),
    border-color-hover: var(--c-d-80),
    background-active: var(--c-n),
    color-active: var(--c-d),
    border-color-active: var(--c-n),
    background-focus: transparent,
    color-focus: map.get($color, 'white'),
    outline-color: map.get($color, 'white'),
    outline-offset: -2px,
    outline-width: 2px,
  ),
);
