@arolariu/components/src/components/ui/carousel.module.css

🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡

.carousel {
  position: relative;
}

.viewport {
  overflow: hidden;
}

.content {
  display: flex;
  margin-left: calc(var(--ac-space-4) * -1);
}

.contentVertical {
  flex-direction: column;
  margin-top: calc(var(--ac-space-4) * -1);
  margin-left: 0;
}

.item {
  min-width: 0;
  flex: 0 0 100%;
  padding-left: var(--ac-space-4);
}

.itemVertical {
  padding-top: var(--ac-space-4);
  padding-left: 0;
}

.navigationButton {
  position: absolute;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
}

.navigationButton[data-orientation="horizontal"] {
  top: 50%;
  transform: translateY(-50%);
}

.navigationButton[data-orientation="vertical"] {
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
}

.previousButton[data-orientation="horizontal"] {
  left: -3rem;
}

.nextButton[data-orientation="horizontal"] {
  right: -3rem;
}

.previousButton[data-orientation="vertical"] {
  top: -3rem;
}

.nextButton[data-orientation="vertical"] {
  bottom: -3rem;
}

.navigationIcon {
  width: 1rem;
  height: 1rem;
}

.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}