@use "../../../styles/tokens/space";
@use "../../../styles/tokens/color";
@use "../../../styles/tools/convert";

$base: (
  default: (
    border: 2px solid transparent,
    font-size: convert.to-rem(18px),
    font-weight: bold,
    border-radius: convert.to-rem(5px),
  ),
  active: (
    transition-property: none,
  ),
  focus: (
    outline: 2px solid var(--color-border-contrast),
    outline-offset: 2px,
  ),
);

$sizes: (
  default: (
    min-height: convert.to-rem(40px),
    padding: convert.to-rem(6px) convert.to-rem(15px),
  ),
  small: (
    min-height: convert.to-rem(30px),
    padding: convert.to-rem(2px) convert.to-rem(10px),
  ),
  large: (
    min-height: convert.to-rem(50px),
    padding: convert.to-rem(2px) convert.to-rem(20px),
  ),
);

$variants: (
  "default": (
    default: (
      color: var(--color-text-default),
      background-color: transparent,
      border-color: var(--color-border-contrast),
    ),
    hover: (
      color: var(--color-text-inverse),
      background-color: var(--color-fill-contrast),
      border-color: transparent,
    ),
    active: (
      color: color.$white,
      background-color: var(--color-fill-tertiary),
      border-color: transparent,
    ),
    disabled: (
      color: var(--color-text-disabled),
      background-color: transparent,
      border-color: var(--color-fill-disabled),
    ),
  ),
  "primary": (
    default: (
      color: color.$white,
      background-color: var(--color-fill-tertiary),
      border-color: transparent,
    ),
    hover: (
      color: var(--color-text-inverse),
      background-color: var(--color-fill-contrast),
      border-color: transparent,
    ),
    active: (
      color: var(--color-fill-contrast),
      background-color: transparent,
      border-color: var(--color-border-contrast),
    ),
    disabled: (
      color: color.$white,
      background-color: var(--color-fill-disabled),
      border-color: var(--color-fill-disabled),
    ),
  ),
  "fill": (
    default: (
      color: var(--color-text-inverse),
      background-color: var(--color-fill-contrast),
      border-color: transparent,
    ),
    hover: (
      color: var(--color-text-default),
      background-color: transparent,
      border-color: var(--color-border-contrast),
    ),
    active: (
      color: color.$white,
      background-color: var(--color-fill-tertiary),
      border-color: transparent,
    ),
    disabled: (
      color: var(--color-text-inverse),
      background-color: var(--color-fill-disabled),
      border-color: var(--color-fill-disabled),
    ),
  ),
  "ghost": (
    default: (
      color: var(--color-text-default),
      background-color: transparent,
      border-color: transparent,
    ),
    hover: (
      color: var(--color-text-default),
      background-color: transparent,
      border-color: var(--color-border-contrast),
    ),
    active: (
      color: var(--color-fill-tertiary),
      background-color: transparent,
      border-color: var(--color-border-contrast),
    ),
    disabled: (
      color: var(--color-text-disabled),
      background-color: transparent,
      border-color: transparent,
    ),
  ),
);

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