.carousel-nav {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-md);
}

.carousel-nav--wide { gap: var(--space-xl); }

.carousel-nav__button {
  display: grid;
  width: var(--size-direction-icon);
  height: var(--size-direction-icon);
  place-items: center;
  padding: 0;
}

.carousel-nav__button .icon {
  width: var(--space-md);
  height: var(--space-md);
}

.carousel-nav__button--prev .icon { transform: rotate(180deg); }

.carousel-nav__button:disabled {
  border-color: transparent;
  border-image: none;
  background: transparent;
  color: var(--color-border-subtle);
  opacity: 1;
  cursor: default;
}

@media (width <= 48rem) {
  .carousel-nav--wide { gap: var(--space-xs); }
  .carousel-nav__button {
    width: var(--size-touch);
    height: var(--size-touch);
  }
}