@layer base {
	[data-carousel] {
		overflow: hidden;
		user-select: none;

		& [data-carousel-content]:not(slot),
		&:not(:has([data-carousel-content])) > :first-child {
			display: flex;
			cursor: grab;

			&:active {
				cursor: grabbing;
			}

			[data-carousel-axis='y'] & {
				flex-direction: column;
				height: 100%;
			}
		}

		:where(& [data-carousel-content] > *),
		:where(&:not(:has([data-carousel-content])) > *:not(slot)) {
			flex-shrink: 0;
			flex-grow: 1;
			flex-basis: 100%;
			min-width: 0;
			min-height: 0;
		}
	}
}