@zeix/ui-element/docs-src/components/module-carousel/module-carousel.css

UIElement - a HTML-first library for reactive Web Components

module-carousel {
	display: flex;
	position: relative;
	overflow: hidden;
	margin-block-end: var(--space-l);
	border-radius: var(--space-s);

	.slides {
		display: flex;
		align-items: center;
		width: 100%;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		overscroll-behavior-x: none;
	}

	[role="tabpanel"] {
		width: 100%;
		height: 100%;
		text-align: center;
		scroll-snap-align: start;
		flex: 0 0 100%;

		& h3 {
			display: block;
		}

		& a[href].anchor {
			justify-content: center;
			padding: 0;
		}

		.slide-content {
			width: 80%;
			margin: 0 auto 0;
			padding-bottom: var(--space-xl);
			text-align: left;
		}
	}

	> nav {
		> button {
			position: absolute;
			top: 2%;
			height: 96%;
			border: 0;
			border-radius: var(--space-xs);
			background: transparent;
			padding: var(--space-m);
			font-size: var(--font-size-xl);
			color: var(--color-text);
			opacity: var(--opacity-dimmed);
			transition: opacity var(--transition-short) var(--easing-inout);
			cursor: pointer;

			&:hover,
			&:active,
			&:focus {
				opacity: var(--opacity-solid);
				background-color: rgba(0, 0, 0, 0.05);
			}

			&:active {
				background-color: rgba(0, 0, 0, 0.1);
			}

			&.prev {
				left: 1%;
			}

			&.next {
				right: 1%;
			}
		}

		[role="tablist"] {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			display: flex;
			justify-content: center;
			padding-block: var(--space-s);

			[role="tab"] {
				width: var(--space-l);
				height: var(--space-l);
				border: 0;
				padding: 0;
				font-size: var(--font-size-l);
				line-height: var(--line-height-xs);
				border-radius: 50%;
				color: var(--color-text);
				background-color: transparent;
				opacity: var(--opacity-translucent);
				transition: opacity var(--transition-short) var(--easing-inout);
				cursor: pointer;

				&:hover {
					opacity: var(--opacity-dimmed);
				}

				&[aria-selected="true"] {
					opacity: var(--opacity-solid);
				}
			}
		}
	}
}