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

$item-base: (
  display: inline-flex,
  align-items: center,
  padding-top: convert.to-rem(10px),
  padding-bottom: convert.to-rem(10px),
  margin: 0 0 0 space.get("xsmall"),
  color: var(--stepbar-item-color),
  background: var(--stepbar-item-background),
  --stepbar-arrow-size: #{convert.to-rem(21px)},
  --stepbar-item-background: var(--color-surface-contrast),
  --stepbar-item-color: var(--color-text-inverse),
);

$arrow-spacing-small: (
  default: (
    padding-left: convert.to-rem(30px),
    padding-right: convert.to-rem(14px),
  ),
  first: (
    padding-left: convert.to-rem(30px),
  ),
  last: (
    padding-right: convert.to-rem(30px),
  ),
);

$arrow-spacing: (
  default: (
    padding-left: convert.to-rem(35px),
    padding-right: convert.to-rem(30px),
  ),
  first: (
    padding-left: convert.to-rem(35px),
  ),
  last: (
    padding-right: convert.to-rem(35px),
  ),
);

$arrows: (
  default: (
    done:
      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0H0V40H5L21 20L5 0Z' fill='white'/%3E%3Cpath d='M0 0L16 20L0 40V0Z' fill='%23141414'/%3E%3C/svg%3E"),
    current:
      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0H0V40H5L21 20L5 0Z' fill='white'/%3E%3Cpath d='M0 0L16 20L0 40V0Z' fill='%23f15e00'/%3E%3C/svg%3E"),
    next:
      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0H0V40H5L21 20L5 0Z' fill='white'/%3E%3Cpath d='M0 0L16 20L0 40V0Z' fill='%23dddddd'/%3E%3C/svg%3E"),
  ),
  inverse: (
    done:
      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0H0V40H5L21 20L5 0Z' fill='%23141414'/%3E%3Cpath d='M0 0L16 20L0 40V0Z' fill='white'/%3E%3C/svg%3E"),
    current:
      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0H0V40H5L21 20L5 0Z' fill='%23141414'/%3E%3Cpath d='M0 0L16 20L0 40V0Z' fill='%23f15e00'/%3E%3C/svg%3E"),
    next:
      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0H0V40H5L21 20L5 0Z' fill='%23141414'/%3E%3Cpath d='M0 0L16 20L0 40V0Z' fill='%23595959'/%3E%3C/svg%3E"),
  ),
);

$item-done-colors: (
  default: (
    --stepbar-item-background: var(--color-surface-contrast),
    --stepbar-item-color: var(--color-text-inverse),
  ),
  inverse: (
    --stepbar-item-background: var(--color-surface-contrast),
    --stepbar-item-color: var(--color-text-inverse),
  ),
);

$item-colors: (
  current: (
    --stepbar-item-background: var(--color-surface-tertiary),
    --stepbar-item-color: #{color.$white},
  ),
  next: (
    --stepbar-item-background: var(--color-surface-moderate),
    --stepbar-item-color: var(--color-text-default),
  ),
);

$link-colors: (
  default: (
    base: (
      color: var(--stepbar-item-color),
    ),
    interaction: (
      color: var(--color-text-accent),
    ),
  ),
  inverse: (
    base: (
      color: var(--stepbar-item-color),
    ),
    interaction: (
      color: var(--color-text-accent),
    ),
  ),
);

$link-underline: (
  text-decoration: underline,
  text-underline-position: under,
  box-shadow: none,
);