.carousel {
  position: relative;

  /* Content */
  .carousel-content {
    overflow: hidden;

    & > div {
      display: flex;
    }
  }

  /* Item */
  .carousel-item {
    flex: 0 0 100%;
    width: 0;
  }

  /* Pagination */
  .carousel-previous,
  .carousel-next {
    position: absolute;
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
    border-radius: var(--radius-rounded);
  }

  /* Orientation */
  &[aria-orientation="horizontal"] {
    .carousel-previous,
    .carousel-next {
      top: 50%;
      transform: translateY(-50%);
    }

    .carousel-previous {
      left: calc(var(--spacing) * -12);
    }

    .carousel-next {
      right: calc(var(--spacing) * -12);
    }
  }

  &[aria-orientation="vertical"] {
    .carousel-content {
      & > div {
        flex-direction: column;
        margin-block-start: calc(var(--spacing) * 4);
      }
    }

    .carousel-item {
      margin-block-start: calc(var(--spacing) * 4);
    }

    .carousel-previous,
    .carousel-next {
      left: 50%;
      rotate: 90deg;
      transform: translateX(-50%);
    }

    .carousel-previous {
      top: calc(var(--spacing) * -12);
    }

    .carousel-next {
      bottom: calc(var(--spacing) * -12);
    }
  }
}
