:root[color-mode="dark"] .light-mode-only {
  display: none;
}

:root[color-mode="light"] .dark-mode-only {
  display: none;
}

:root[sound-mode="muted"] .sound-on-only {
  display: none;
}

:root[sound-mode="sound"] .sound-muted-only {
  display: none;
}

:root[playing-mode="playing"] .paused-only {
  display: none;
}

:root[playing-mode="paused"] .playing-only {
  display: none;
}

.max-width-wrapper {
  position: relative;
  max-width: min(100%, 1100px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;

  @media (max-width: calc(1000 / 16 * 1rem)) {
    padding-left: 16px;
    padding-right: 16px;
  }

  @media (max-width: calc(600 / 16 * 1rem)) {
    padding-left: 8px;
    padding-right: 8px;
  }
}

.accent {
  color: var(--color-primary);
}

:root {
  --spring-easing: linear(
    0,
    0.009,
    0.035 2.1%,
    0.141,
    0.281 6.7%,
    0.723 12.9%,
    0.938 16.7%,
    1.017,
    1.077,
    1.121,
    1.149 24.3%,
    1.159,
    1.163,
    1.161,
    1.154 29.9%,
    1.129 32.8%,
    1.051 39.6%,
    1.017 43.1%,
    0.991,
    0.977 51%,
    0.974 53.8%,
    0.975 57.1%,
    0.997 69.8%,
    1.003 76.9%,
    1.004 83.8%,
    1
  );
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(var(--offset, -8px));
  }

  to {
    opacity: 1;
    transform: translateY(0px);
  }
}

.slide-in {
  /* To stop snapping to pixels after the animation finishes. */
  will-change: transform;
  animation: slideIn var(--duration, 600ms) var(--ease-function, ease-out)
    backwards;
  animation-delay: var(--delay, 0);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: var(--full-opacity, 1);
  }
}

@keyframes fadeOut {
  from {
    opacity: var(--full-opacity, 1);
  }
  to {
    opacity: 0;
  }
}

@keyframes horizontalSlideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0%);
  }
}

@keyframes horizontalSlideOut {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}

.link {
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 0 var(--color-primary);
  font-weight: var(--weight-semibold);
  transition:
    box-shadow 0.2s,
    filter 0.3s;
  box-decoration-break: clone;
  outline-color: var(--color-primary);

  &:hover {
    box-shadow: 0 2px 0 transparent;
  }
}

.button-link {
  position: relative;
  text-decoration: none;
  border: none;
  width: fit-content;
  padding: 4px 16px;
  border-radius: 4px;
  font-size: calc(20 / 16 * 1rem);
  font-weight: var(--weight-medium);
  transition: transform 200ms;

  &:hover {
    transform: scale(1.03);
  }

  &:hover .button-link--hover,
  &:hover .button-link--hover {
    transition: clip-path 300ms;
    clip-path: polygon(-1% 101%, -1% -1%, 101% -1%, 101% 101%);
  }

  @media (max-width: calc(1000 / 16 * 1rem)) {
    text-align: center;
    width: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

.button-link--primary {
  background: var(--color-text);
  color: var(--color-background);
}

.button-link--secondary {
  background: var(--color-primary);
  color: var(--color-background);
}

.button-link--hover {
  position: absolute;
  inset: 0;
  background: var(--color-primary);
  transition: clip-path 500ms;
  clip-path: polygon(0% 100%, 0% 100%, 100% 100%, 100% 100%);
  border-radius: inherit;
  padding: inherit;
  font-size: inherit;
}

/* To stop tooltip from creating a scrollbar. */
html,
body {
  overflow-x: clip;
}

.tooltip {
  position: relative;
  cursor: help;

  &::after {
    content: "?";
    vertical-align: super;
    font-size: 0.75em;
    font-weight: var(--weight-bold);
    color: var(--color-primary);
  }

  & .tooltiptext {
    cursor: text;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    opacity: 0;
    visibility: hidden;
    transform: translateX(calc(-50% + var(--tooltip-shift, 0px)))
      translateY(-2px);
    transition:
      opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 400ms cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0ms linear 100ms;

    hyphens: manual;
    text-align: center;
    font-size: calc(16 / 16 * 1rem);
    font-weight: var(--weight-medium);
    width: max-content;
    max-width: 312px;
    border-radius: 8px;
    padding: 8px 16px;
    background: var(--color-text);
    color: var(--color-background);
  }

  & .tooltiptext::selection,
  & .tooltiptext *::selection {
    background: hsl(166deg 100% 24%);
  }

  & .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(calc(-5px - var(--tooltip-shift, 0px)));
    margin-top: -1px;
    border-width: 6px 5px 0 5px;
    border-style: solid;
    border-color: var(--color-text) transparent transparent transparent;
  }

  & .tooltiptext::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 8px;
    background: transparent;
  }

  &:hover .tooltiptext {
    opacity: 1;
    transform: translateX(calc(-50% + var(--tooltip-shift, 0px)))
      translateY(0px);
    visibility: visible;
    transition:
      opacity 400ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 400ms cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0ms linear 0ms;
  }
}

.semibold {
  font-weight: var(--weight-semibold);
  color: var(--color-grey700);
}

.full-bleed {
  width: 100%;
  grid-column: 1 / -1;
  margin-left: auto;
  margin-right: auto;
}