:root {
  --stack-offset: 8px;
  --stack-slide: calc(2 * var(--stack-offset));
}

.stackContainer {
  position: relative;
}

.stackHiddenCount {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 0.5rem;
  text-align: right;
}

.stackEnter {
  animation: stackEnter 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.stackEnterReverse {
  animation: stackEnterReverse 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.stackExit {
  animation: stackExit 180ms cubic-bezier(0.4, 0, 1, 1) both;
}

.stackExitReverse {
  animation: stackExitReverse 180ms cubic-bezier(0.4, 0, 1, 1) both;
}

@keyframes stackEnter {
  from {
    opacity: 0;
    transform: translate(var(--stack-slide), calc(-1 * var(--stack-slide)));
  }

  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes stackEnterReverse {
  from {
    opacity: 0;
    transform: translate(calc(-1 * var(--stack-slide)), var(--stack-slide));
  }

  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes stackExit {
  from {
    opacity: 1;
    transform: translate(0, 0);
  }

  to {
    opacity: 0;
    transform: translate(calc(-1 * var(--stack-slide)), var(--stack-slide));
  }
}

@keyframes stackExitReverse {
  from {
    opacity: 1;
    transform: translate(0, 0);
  }

  to {
    opacity: 0;
    transform: translate(var(--stack-slide), calc(-1 * var(--stack-slide)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .stackEnter,
  .stackEnterReverse,
  .stackExit,
  .stackExitReverse {
    animation: none;
  }
}