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

$space: space.get("large");

$viewport-horizontal-spacing: (
  default: convert.to-rem(20px),
  md: 0,
);

$controls-spacing: space.get("medium");

$tabs-spacing: space.get("small");

$tab-colors: (
  default: (
    color: var(--color-text-moderate),
    border-color: transparent,
    background-color: transparent,
  ),
  active: (
    color: var(--color-text-brand),
    border-color: var(--color-border-brand),
    background-color: transparent,
  ),
  hover: (
    color: var(--color-text-brand),
    border-color: var(--color-border-brand),
    background-color: var(--color-surface-subtle),
  ),
);

$navigation-spacing: space.get("small");

$slide-min-height: (
  default: convert.to-rem(560px),
);

// SVG countdown animation constants
$animated-dot-radius: 5;
$pi: math.div(math.round(math.$pi * 10000), 10000);
$animated-dot-circumference: 2 * $pi * $animated-dot-radius;

@keyframes countdown {
  from {
    // stroke-dashoffset can't be negative number due to Safari issues.
    stroke-dashoffset: $animated-dot-circumference;
  }
  to {
    stroke-dashoffset: 0;
  }
}