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

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

$button: (
  radius: map.get($border-radius, 's'),
  shadow: none,
  small: (
    size: 2rem,
    padding-horizontal: var(--s-s),
    padding-vertical: var(--s-2xs),
    font: 'body-xs',
    icon-only-size: map.get($icon, '2xs'),
    icon-spacing: var(--s-3xs),
    icon-size: map.get($icon, '2xs'),
  ),
  medium: (
    size: 2.5rem,
    padding-horizontal: var(--s-m),
    padding-vertical: var(--s-xs),
    font: 'body-s',
    icon-only-size: map.get($icon, 's'),
    icon-spacing: var(--s-xs),
    icon-size: map.get($icon, 'xs'),
  ),
  large: (
    size: 2.75rem,
    padding-horizontal: var(--s-l),
    padding-vertical: 0.625rem,
    font: 'body-m',
    icon-only-size: map.get($icon, 'm'),
    icon-spacing: var(--s-s),
    icon-size: map.get($icon, '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,
    shadow-focus: 0px 0px 0px 2px var(--cm-border-inverted),
    outline-color: var(--cm-border-primary),
    outline-offset: 2px,
    outline-width: 2px,
    background-disabled: var(--cm-surface-primary-low-0),
    color-disabled: var(--cm-on-surface-grey-low-transparent),
    border-color-disabled: transparent,
    opacity-disabled: 1,
  ),
  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-medium-1),
    color-hover: var(--cm-on-surface-brand),
    border-color-hover: transparent,
    background-active: var(--cm-surface-secondary-medium-0),
    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,
    shadow-focus: 0px 0px 0px 2px var(--cm-border-inverted),
    outline-color: var(--cm-border-primary),
    outline-offset: 2px,
    outline-width: 2px,
    background-disabled: var(--cm-surface-secondary-low),
    color-disabled: var(--cm-on-surface-grey-low-transparent),
    border-color-disabled: transparent,
    opacity-disabled: 1,
  ),
  primary-neutral: (
    background: var(--cm-surface-brand),
    color: var(--cm-on-surface-inverted),
    border-color: var(--cm-border-inverted-low-transparent),
    border-width: 1px,
    background-hover: var(--cm-surface-grey-highest-1-transparent),
    color-hover: var(--cm-on-surface-inverted),
    border-color-hover: var(--cm-border-inverted-low-transparent),
    background-active: var(--cm-surface-brand),
    color-active: var(--cm-on-surface-inverted),
    border-color-active: var(--cm-border-inverted-low-transparent),
    background-focus: var(--cm-surface-brand),
    color-focus: var(--cm-on-surface-inverted),
    border-color-focus: var(--cm-border-brand),
    shadow-focus: 0px 0px 0px 2px var(--cm-border-inverted),
    outline-color: var(--cm-border-primary),
    outline-offset: 2px,
    outline-width: 2px,
    background-disabled: var(--cm-surface-grey-low-1),
    color-disabled: var(--cm-on-surface-grey-low-transparent),
    border-color-disabled: var(--cm-border-inverted-low-transparent),
    opacity-disabled: 0.9,
  ),
  primary-inverted: (
    background: var(--cm-surface-primary-lowest),
    color: var(--cm-on-surface-primary),
    border-color: transparent,
    border-width: 0px,
    background-hover: var(--cm-surface-inverted),
    color-hover: var(--cm-on-surface-primary-highest),
    border-color-hover: transparent,
    background-active: var(--cm-surface-primary-low-0),
    color-active: var(--cm-on-surface-primary-highest),
    border-color-active: transparent,
    background-focus: var(--cm-surface-primary-lowest),
    color-focus: var(--cm-on-surface-primary),
    border-color-focus: transparent,
    shadow-focus: 0px 0px 0px 2px var(--cm-border-primary),
    outline-color: var(--cm-border-inverted),
    outline-offset: 2px,
    outline-width: 2px,
    background-disabled: color-mix(
        in srgb,
        var(--cm-surface-primary-lowest) 50%,
        transparent
      ),
    color-disabled: color-mix(
        in srgb,
        var(--cm-on-surface-primary) 50%,
        transparent
      ),
    border-color-disabled: transparent,
    opacity-disabled: 1,
  ),
  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),
    border-width-focus: 1px,
    shadow-focus: 0px 0px 0px 2px var(--cm-border-inverted),
    outline-color: var(--cm-border-primary),
    outline-offset: 2px,
    outline-width: 2px,
    background-disabled: transparent,
    color-disabled: color-mix(
        in srgb,
        var(--cm-on-surface-primary) 50%,
        transparent
      ),
    border-color-disabled: color-mix(
        in srgb,
        var(--cm-border-primary) 50%,
        transparent
      ),
    opacity-disabled: 1,
  ),
  secondary-neutral: (
    background: transparent,
    color: var(--cm-on-surface-brand),
    border-color: var(--cm-border-brand),
    border-width: 1px,
    background-hover: var(--cm-surface-grey-low-0-transparent),
    color-hover: var(--cm-on-surface-brand),
    border-color-hover: var(--cm-border-brand),
    background-active: var(--cm-surface-grey-low-0),
    color-active: var(--cm-on-surface-brand),
    border-color-active: var(--cm-border-brand),
    background-focus: transparent,
    color-focus: var(--cm-on-surface-brand),
    border-color-focus: var(--cm-border-brand),
    shadow-focus: 0px 0px 0px 2px var(--cm-border-inverted),
    outline-color: var(--cm-border-primary),
    outline-offset: 2px,
    outline-width: 2px,
    background-disabled: transparent,
    color-disabled: color-mix(
        in srgb,
        var(--cm-on-surface-brand) 50%,
        transparent
      ),
    border-color-disabled: color-mix(
        in srgb,
        var(--cm-border-brand) 50%,
        transparent
      ),
    opacity-disabled: 1,
  ),
  secondary-inverted: (
    background: transparent,
    color: var(--cm-on-surface-inverted),
    border-color: var(--cm-border-inverted),
    border-width: 2px,
    background-hover: var(--cm-surface-grey-low-0-transparent),
    color-hover: var(--cm-on-surface-brand),
    border-color-hover: var(--cm-border-inverted),
    background-active: var(--cm-surface-inverted),
    color-active: var(--cm-on-surface-brand),
    border-color-active: transparent,
    background-focus: transparent,
    color-focus: var(--cm-on-surface-inverted),
    border-color-focus: transparent,
    shadow-focus: 0px 0px 0px 2px var(--cm-border-inverted),
    outline-color: var(--cm-border-primary),
    outline-offset: 2px,
    outline-width: 2px,
    background-disabled: transparent,
    color-disabled: color-mix(
        in srgb,
        var(--cm-on-surface-inverted) 50%,
        transparent
      ),
    border-color-disabled: color-mix(
        in srgb,
        var(--cm-border-inverted) 50%,
        transparent
      ),
    opacity-disabled: 1,
  ),
  tertiary: (
    background: transparent,
    color: var(--cm-on-surface-primary),
    border-color: transparent,
    border-width: 1px,
    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: transparent,
    shadow-focus: 0px 0px 0px 2px var(--cm-border-inverted),
    outline-color: var(--cm-border-primary),
    outline-offset: 2px,
    outline-width: 2px,
    background-disabled: transparent,
    color-disabled: color-mix(
        in srgb,
        var(--cm-on-surface-primary) 50%,
        transparent
      ),
    border-color-disabled: transparent,
    opacity-disabled: 1,
  ),
  tertiary-neutral: (
    background: transparent,
    color: var(--cm-on-surface-brand),
    border-color: transparent,
    border-width: 1px,
    background-hover: var(--cm-surface-grey-low-0-transparent),
    color-hover: var(--cm-on-surface-brand),
    border-color-hover: var(--cm-border-brand),
    background-active: var(--cm-surface-grey-low-0),
    color-active: var(--cm-on-surface-brand),
    border-color-active: var(--cm-border-brand),
    background-focus: transparent,
    color-focus: var(--cm-on-surface-brand),
    border-color-focus: transparent,
    shadow-focus: 0px 0px 0px 2px var(--cm-border-inverted),
    outline-color: var(--cm-border-primary),
    outline-offset: 2px,
    outline-width: 2px,
    background-disabled: transparent,
    color-disabled: color-mix(
        in srgb,
        var(--cm-on-surface-brand) 50%,
        transparent
      ),
    border-color-disabled: transparent,
    opacity-disabled: 1,
  ),
  tertiary-inverted: (
    background: transparent,
    color: var(--cm-on-surface-inverted),
    border-color: transparent,
    border-width: 2px,
    background-hover: var(--cm-surface-grey-low-0-transparent),
    color-hover: var(--cm-on-surface-brand),
    border-color-hover: var(--cm-border-brand),
    background-active: var(--cm-surface-grey-low-0),
    color-active: var(--cm-on-surface-brand),
    border-color-active: var(--cm-border-brand),
    background-focus: transparent,
    color-focus: var(--cm-on-surface-inverted),
    border-color-focus: transparent,
    shadow-focus: 0px 0px 0px 2px var(--cm-border-primary),
    outline-color: var(--cm-border-inverted),
    outline-offset: 2px,
    outline-width: 2px,
    background-disabled: transparent,
    color-disabled: color-mix(
        in srgb,
        var(--cm-on-surface-inverted) 50%,
        transparent
      ),
    border-color-disabled: transparent,
    opacity-disabled: 1,
  ),
);