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

$link: (
  outline-color: var(--cm-border-primary),
  outline-width: 2px,
  outline-radius: 1px,
  standalone-line-height: map.get($line-height, 'xs'),
  inverted: (
    color: var(--cm-on-surface-inverted),
    color-hover: var(--cm-on-surface-secondary-medium),
    color-visited: var(--cm-on-surface-inverted),
    color-active: var(--cm-on-surface-secondary-medium),
    outline-color: var(--cm-on-surface-inverted),
  ),
  brand: (
    color: var(--cm-on-surface-brand),
    color-hover: var(--cm-on-surface-grey),
    color-visited: var(--cm-on-surface-brand),
    color-active: var(--cm-on-surface-brand),
    outline-color: var(--cm-border-primary),
  ),
  button: (
    min-height: 2.75rem,
    min-width: 2.75rem,
    font: var(--f-m),
    radius: map.get($border-radius, 's'),
    shadow: none,
    border-width: 2px,
    outline-width: 2px,
    outline-offset: 2px,
    padding-horizontal: var(--s-m),
    padding-vertical: var(--s-xs),
  ),
  primary: (
    background: var(--cm-surface-primary),
    color: var(--cm-on-surface-inverted),
    border-color: transparent,
    border-width: 0px,
    background-hover: var(--cm-surface-primary-high),
    color-hover: var(--cm-on-surface-inverted),
    border-color-hover: transparent,
    background-active: var(--cm-surface-primary-highest),
    color-active: var(--cm-on-surface-inverted),
    border-color-active: transparent,
    background-focus: var(--cm-surface-primary),
    color-focus: var(--cm-on-surface-inverted),
    border-color-focus: transparent,
    outline-color: var(--cm-border-primary),
    outline-offset: 2px,
    outline-width: 2px,
  ),
  primary-highlight: (
    background: var(--cm-surface-secondary),
    color: var(--cm-on-surface-brand),
    border-color: transparent,
    border-width: 0px,
    background-hover: var(--cm-surface-secondary-high),
    color-hover: var(--cm-on-surface-brand),
    border-color-hover: transparent,
    background-active: var(--cm-surface-secondary-highest),
    color-active: var(--cm-on-surface-brand),
    border-color-active: transparent,
    background-focus: var(--cm-surface-secondary),
    color-focus: var(--cm-on-surface-brand),
    border-color-focus: transparent,
    outline-color: var(--cm-border-primary),
    outline-offset: 2px,
    outline-width: 2px,
  ),
  secondary: (
    background: transparent,
    color: var(--cm-border-primary),
    border-color: var(--cm-border-primary),
    border-width: 2px,
    background-hover: var(--cm-surface-primary-lowest),
    color-hover: var(--cm-on-surface-primary-highest),
    border-color-hover: var(--cm-border-primary-highest),
    background-active: var(--cm-surface-primary-low-0),
    color-active: var(--cm-on-surface-primary-highest),
    border-color-active: var(--cm-border-primary-highest),
    background-focus: transparent,
    color-focus: var(--cm-on-surface-primary),
    border-color-focus: var(--cm-border-primary),
    outline-color: var(--cm-border-primary),
    outline-offset: 2px,
    outline-width: 2px,
  ),
);