@zeix/ui-element/docs-src/components/my-slider/my-slider.css

UIElement - minimal reactive framework based on Web Components

my-slider {
	display: flex;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	position: relative;
	
	.slides {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}
	
	.slide {
		min-width: 100%;
		text-align: center;

		&:not(.active) {
			display: none;
		}
	}
	
	.dots {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		gap: var(--space-xs);
		padding-block: var(--space-s);

		> span {
            width: var(--space-s);
            height: var(--space-s);
            border-radius: 50%;
            background-color: var(--color-text);
			opacity: var(--opacity-translucent);

            &.active {
                opacity: var(--opacity-solid);
            }
		}
	}
	
	> 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-xxl);
		color: var(--color-text);
		opacity: var(--opacity-dimmed);
		transition: opacity var(--transition-short) var(--easing-inout);

		&: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%;
        }
	}
}