/* Forward/Back Arrows */
.forward-arrow,
.back-arrow {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-1);
}

.forward-arrow-icon {
  transform: translateX(0);
  transition: transform 0.15s ease;
}

.forward-arrow:hover .forward-arrow-icon {
  transform: translateX(0.25rem);
}

.back-arrow svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.forward-reveal {
  display: inline-flex;
  align-items: flex-start;
  position: relative;
}

.forward-reveal-icon {
  opacity: 0;
  color: var(--color-gray-400);
  transform: translateX(0);
  transition: opacity 0.2s ease, transform 0.2s ease;
  margin-left: 0.25rem;
}

.forward-reveal:hover .forward-reveal-icon {
  opacity: 1;
  transform: translateX(0.25rem);
}