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

$outline-width: convert.to-rem(2px);
$focusring-space: convert.to-rem(
  base.$focusring-width + base.$focusring-offset
);
$negative-outline-width: $focusring-space * -1;

$tablist-spacing: (
  margin: $negative-outline-width $negative-outline-width
    (
      space.get() + $negative-outline-width,
    )
    $negative-outline-width,
  padding: $focusring-space,
);

$tab: (
  default: (
    color: var(--color-text-default),
    background-color: transparent,
    box-shadow: inset 0 -1px 0 0 var(--color-surface-moderate),
  ),
  active: (
    color: var(--color-text-default),
    background-color: var(--color-fill-moderate),
    box-shadow: (
      inset 0 4px 0 0 var(--color-border-accent),
      inset 0 -1px 0 0 var(--color-fill-moderate),
    ),
  ),
  hover: (
    color: var(--color-text-accent),
    background-color: transparent,
    box-shadow: inset 0 -1px 0 0 var(--color-surface-moderate),
  ),
  disabled: (
    color: var(--color-text-disabled),
    background-color: transparent,
  ),
);

$tab-sizes: (
  default: (
    padding: convert.to-rem(15px) convert.to-rem(20px),
  ),
  large: (
    padding: convert.to-rem(20px),
  ),
);