export const carouselRoot = "relative";
export const carouselControl =
  "absolute size-full flex place-content-between items-center";
export const carouselPrevTrigger =
  "rounded-full p-2.5 h-9 -ms-12 border border-foreground/15";
export const carouselNextTrigger =
  "rounded-full p-2.5 h-9 -me-12 border border-foreground/15";
export const carouselIndicatorGroup =
  "absolute inset-x-0 bottom-0 z-5 w-full flex gap-1.5 justify-center mb-6";
export const carouselIndicator =
  "size-3 border border-foreground/10 bg-background/40 rounded-full data-[current]:bg-background/70 data-[current]:border-foreground/20 data-[current]:shadow-md/5";
export const carouselItemGroup = "size-full";
export const carouselItem =
  "relative size-full overflow-hidden [&>img]:absolute [&>img]:inset-0 [&>img]:size-full [&>img]:object-cover";
