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

$space: space.get();

$button-size: $space;

$dot-dimension: 8px;

$dot-layout: (
  width: $dot-dimension,
  height: $dot-dimension,
  margin: 8px,
);

$outline-width-default: 2px;
$outline-width-focus: 3px;
$outline-offset-focus: 2px;

$dot: (
  default: (
    background-color: var(--color-surface-contrast),
  ),
  focus: (
    background-color: var(--color-surface-contrast),
    outline-offset: $outline-offset-focus,
    outline-width: $outline-width-focus "!important",
    outline-color: var(--color-border-contrast) "!important",
  ),
  hover: (
    background-color: var(--color-surface-contrast),
    outline: $outline-width-default solid var(--color-border-contrast),
  ),
  active: (
    background-color: transparent,
    outline: $outline-width-default solid var(--color-border-contrast),
  ),
);

$breakout-buttons-breakpoints: (
  (864px, 991px),
  (1088px, 1239px),
  (1340px, 1379px),
  (1460px)
);

$viewport-horizontal-spacing: (
  "default": space.get("medium"),
);

$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;
  }
}