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

$space: space.get();

$dot-layout: (
  width: convert.to-rem(10px),
  height: convert.to-rem(10px),
  margin: convert.to-rem(8px),
);

$navigation-gap: convert.to-rem(16px);

$dot: (
  default: var(--color-icon-default),
  hover: var(--color-icon-brand),
  active: var(--color-icon-brand),
);

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