@alegendstale/holly-components/dist/components/carousel-scroller/carousel-scroller.styles.js

Reusable UI components created using lit

import { css as r } from "lit";
const o = r`
	:host {
		--padding: 40px;
		--margin: 80px;
	}

	.container {
		width: 600px;
		height: 400px;
		margin: 20px;
		border-radius: 20px;
		overflow: hidden;
		position: relative;

		& > button {
			position: absolute;
			width: var(--padding);
			height: calc(var(--padding) * 2);
			z-index: 1;
			background-color: #00000080;
			border: none;
			bottom: calc(50% - var(--padding));
			font-size: 32px;

			&:hover {
				background-color: #6352b880;
			}

			&:nth-child(1) {
				left: 0;
				border-top-right-radius: 314px;
				border-bottom-right-radius: 314px;
			}

			&:nth-child(2) {
				right: 0;
				border-top-left-radius: 314px;
				border-bottom-left-radius: 314px;
			}
		}

		& > div {
			display: flex;
			overflow-x: scroll;
			position: relative;
			scroll-behavior: smooth;
			scroll-snap-type: x mandatory;
			scrollbar-width: none;
			padding: 0 var(--padding);
		}

		::slotted(*) {
			display: flex;
			flex-direction: column;
			justify-content: center;
			min-height: calc(400px - var(--margin));
			min-width: calc(600px - var(--margin));
			max-height: calc(400px - var(--margin));
			max-width: calc(600px - var(--margin));
			background: white;
			scroll-snap-align: center;
			padding: calc(var(--margin) / 2);
		}
	}
`;
export {
  o as default
};