.wp-block-wrd-cards-slider__wrapper {
	position: relative;
}

.wp-block-wrd-cards-slider__slider {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	scroll-behavior: smooth;
	border-radius: 0.25rem;

	--wp-block-wrd-cards-slider__button-size: 2.5rem;
	--wp-block-wrd-cards-slider__button-distance: 1.5rem;
	--wp-block-wrd-cards-slider__button-gap: 0.75rem;

	@media (hover: hover) {
		margin-bottom: calc(
			var(--wp-block-wrd-cards-slider__button-distance) +
				var(--wp-block-wrd-cards-slider__button-size)
		);

		&::scroll-button(*) {
			display: flex;
			align-items: center;
			justify-content: center;
			width: var(--wp-block-wrd-cards-slider__button-size);
			height: var(--wp-block-wrd-cards-slider__button-size);
			background-color: var(--color-primary-50);
			background-size: calc(
				var(--wp-block-wrd-cards-slider__button-size) * 0.5
			);
			background-repeat: no-repeat;
			background-position: center;
			border: none;
			border-radius: var(--wp-block-wrd-cards-slider__button-size);
			position: absolute;
			bottom: calc(
				-1 * var(--wp-block-wrd-cards-slider__button-size) -
					var(--wp-block-wrd-cards-slider__button-distance)
			);
			right: 0;
			cursor: pointer;
			transition:
				background-color 150ms ease,
				opacity 300ms ease;
		}

		&::scroll-button(*):hover {
			background-color: var(--color-primary-100);
			color: var(--color-primary-950);
		}

		&::scroll-button(*):disabled {
			opacity: 0.5;
			cursor: unset;
			background-color: var(--color-primary-50) !important;
		}

		&::scroll-button(left) {
			content: "" / "Scroll Left";
			background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23000000"><path d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z"/></svg>');

			right: calc(
				var(--wp-block-wrd-cards-slider__button-size) +
					var(--wp-block-wrd-cards-slider__button-gap)
			);
		}

		&::scroll-button(right) {
			content: "" / "Scroll Right";
			background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23000"><path d="M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z"/></svg>');
		}

		@media (width >= 64rem) {
			&::scroll-button(*) {
				bottom: unset;
				top: calc(
					-1 * var(--wp-block-wrd-cards-slider__button-size) -
						var(--wp-block-wrd-cards-slider__button-distance)
				);
			}
		}
	}
}

.wp-block-wrd-cards-slider__slider > * {
	width: 24rem;
	max-width: calc(100vw - 6rem);
	flex-shrink: 0;
	flex-grow: 1;
	scroll-snap-align: start;
}