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

UIElement - a HTML-first library for reactive Web Components

module-carousel {
	display: flex;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	position: relative;

	.slides {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	[role="tabpanel"] {
		width: 100%;
		height: 100%;
		text-align: center;

		&[aria-current="false"] {
			display: none;
		}

		& h3 {
			display: block;
		}
	}

	> 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);
				}
			}
		}
	}
}