@use "../../../styles/tokens/space";
@use "../../../styles/tools/convert";
@use "sass:map";

$tag: (
  display: inline-flex,
  vertical-align: baseline,
  border-radius: 9999px,
  box-decoration-break: clone,
);

$sizes: (
  default: (
    padding: convert.to-rem(7px) convert.to-rem(12px),
    font-size: convert.to-rem(14px) "!important",
    line-height: 1rem "!important",
    font-weight: 700,
    border-width: 1px,
  ),
  small: (
    padding: convert.to-rem(2px) convert.to-rem(8px),
    font-size: convert.to-rem(12px) "!important",
    line-height: convert.to-rem(14px) "!important",
    font-weight: 400,
    border-width: 2px,
  ),
  large: (
    padding: convert.to-rem(11px) convert.to-rem(15px),
    font-size: convert.to-rem(16px) "!important",
    line-height: convert.to-rem(18px) "!important",
    font-weight: 700,
    border-width: 2px,
  ),
);

$icon-sizes: (
  default: (
    padding: convert.to-rem(7px),
  ),
  large: (
    padding: convert.to-rem(8px),
  ),
);

$colors: (
  "default": (
    background-color: var(--color-fill-subtle),
    color: var(--color-text-default),
  ),
  "orange": (
    background-color: var(--tag-orange),
    color: var(--tag-text-dark),
  ),
  "black": (
    background-color: var(--tag-black),
    color: var(--tag-text-light),
  ),
  "yellow": (
    background-color: var(--tag-yellow),
    color: var(--tag-text-dark),
  ),
  "green": (
    background-color: var(--tag-green),
    color: var(--tag-text-dark),
  ),
  "blue": (
    background-color: var(--tag-blue),
    color: var(--tag-text-dark),
  ),
  "success": (
    background-color: var(--tag-success),
    color: var(--tag-text-light),
  ),
  "danger": (
    background-color: var(--tag-danger),
    color: var(--tag-text-light),
  ),
  "info": (
    background-color: var(--tag-info),
    color: var(--tag-text-light),
  ),
  "warning": (
    background-color: var(--tag-warning),
    color: var(--tag-text-dark),
  ),
  "transparent": (
    background-color: transparent,
    color: var(--color-text-default),
    border-color: var(--color-border-strong),
    border-style: solid,
  ),
);

$states: (
  default: map.get($colors, "default"),
  hover: (
    color: var(--color-text-default),
    background-color: var(--color-fill-disabled),
  ),
  active: (
    color: var(--color-text-inverse),
    background-color: var(--color-background-contrast),
  ),
  focus: (
    color: map.get(map.get($colors, "default"), color),
    background-color: map.get(map.get($colors, "default"), background-color),
    outline: 2px solid var(--color-background-contrast) "!important",
  ),
  disabled: (
    color: var(--color-text-disabled),
    background-color: var(--color-fill-subtle),
  ),
);

$states-transparent-color: (
  default: (
    background-color: transparent,
    color: var(--color-text-default),
  ),
  hover: (
    border-color: var(--color-fill-secondary),
  ),
  active: (
    color: var(--color-text-inverse),
    background-color: var(--color-fill-secondary),
    border-color: var(--color-fill-secondary),
  ),
  focus: (
    background-color: transparent,
    color: var(--color-text-default),
    outline: 2px solid var(--color-background-contrast) "!important",
    border-color: transparent,
  ),
  disabled: (
    color: var(--color-text-disabled),
    background-color: transparent,
    border-color: var(--color-border-strong),
  ),
);

$icon-states: (
  default: (
    color: var(--color-text-default),
    background-color: var(--color-fill-moderate),
  ),
  hover: (
    color: var(--color-text-default),
    background-color: var(--color-fill-disabled),
  ),
  active: (
    color: var(--color-text-inverse),
    background-color: var(--color-background-contrast),
  ),
  focus: (
    color: map.get(map.get($colors, "default"), color),
    background-color: map.get(map.get($colors, "default"), background-color),
    outline: 2px solid var(--color-background-contrast) "!important",
  ),
  disabled: (
    color: var(--color-fill-subtle),
    background-color: var(--color-fill-moderate),
  ),
);
