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

$link: (
  color: var(--c-p),
  color-hover: var(--c-p-160),
  color-visited: var(--c-p),
  color-active: var(--c-d),
  outline-color: var(--c-p),
  outline-width: 2px,
  outline-radius: 2px,
  standalone-line-height: map.get($line-height-ui, 'xs'),
  inverted: (
    color: map.get($color, 'white'),
    color-hover: var(--c-a-30),
    color-visited: map.get($color, 'white'),
    color-active: map.get($color, 'white'),
    outline-color: map.get($color, 'white'),
  ),
  button: (
    font: var(--f-ui-m),
    radius: 4px,
    shadow: var(--sh-1),
    border-width: 2px,
    outline-width: 1px,
    padding-horizontal: var(--s-m),
    padding-vertical: var(--s-xs),
  ),
  primary: (
    background: var(--c-p),
    color: map.get($color, 'white'),
    border-color: var(--c-p),
    background-hover: var(--c-p-80),
    color-hover: map.get($color, 'white'),
    border-color-hover: var(--c-p-80),
    background-active: var(--c-p-140),
    color-active: map.get($color, 'white'),
    border-color-active: var(--c-p-140),
    background-focus: var(--c-p),
    color-focus: map.get($color, 'white'),
    border-color-focus: var(--c-p),
    outline-color: map.get($color, 'white'),
  ),
  secondary: (
    background: map.get($color, 'white'),
    color: var(--c-p),
    border-color: var(--c-p),
    background-hover: var(--c-p-80),
    color-hover: map.get($color, 'white'),
    border-color-hover: var(--c-p-80),
    background-active: var(--c-p-140),
    color-active: map.get($color, 'white'),
    border-color-active: var(--c-p-140),
    background-focus: var(--c-p-140),
    color-focus: map.get($color, 'white'),
    border-color-focus: var(--c-p-140),
    outline-color: map.get($color, 'white'),
  ),
  cta: (
    background: var(--c-s),
    color: var(--c-d),
    border-color: var(--c-s),
    background-hover: var(--c-s-80),
    color-hover: var(--c-d),
    border-color-hover: var(--c-s-80),
    background-active: var(--c-s-120),
    color-active: var(--c-d),
    border-color-active: var(--c-s-120),
    background-focus: var(--c-s),
    color-focus: var(--c-d),
    border-color-focus: var(--c-s),
    outline-color: var(--c-d),
  ),
);
