@use "../../../styles/tools/convert";

$base: (
  default: (
    width: convert.to-rem(40px),
    height: convert.to-rem(40px),
    border: 2px solid transparent,
    border-radius: convert.to-rem(22px),
    margin: 2px,

    font-size: convert.to-rem(18px),
    font-weight: bold,
  ),
  active: (
    transition-property: none,
  ),
  focus: (
    outline-offset: 2px,
  ),
);

$states: (
  default: (
    color: var(--color-text-default),
    background-color: var(--color-fill-moderate),
    border-color: var(--color-fill-moderate),
  ),
  hover: (
    color: var(--color-text-inverse),
    background-color: var(--color-fill-contrast),
    border-color: var(--color-fill-contrast),
  ),
  active: (
    color: var(--color-text-inverse),
    background-color: var(--color-fill-tertiary),
    border-color: var(--color-fill-tertiary),
  ),
  focus: (
    color: var(--color-text-inverse),
    background-color: var(--color-fill-contrast),
    border-color: var(--color-fill-contrast),
    outline: 2px solid var(--color-fill-contrast),
  ),
  disabled: (
    color: var(--color-text-disabled),
    background-color: transparent,
    border-color: var(--color-fill-disabled),
  ),
);

$icon-offset-from-edge: -0.25em;
$icon-offset-from-text: 0.5em;