style.scss

@import "@splidejs/splide/dist/css/splide-core.min";

.wp-block-pulsar-carousel {
	--accent-color: var(--wp--custom--pulsar--carousel--accent-color, #1f1f1f);
	--transition-duration: var(--wp--custom--pulsar--carousel--transition-duration, 250ms);
	--arrow-color: var(--wp--custom--pulsar--carousel--arrow-color, #fff);
	--arrow-color-active: var(--wp--custom--pulsar--carousel--arrow-color-active, var(--accent-color));
	--pagination-color: var(--wp--custom--pulsar--carousel--pagination-color, #fff);
	--pagination-color-active: var(--wp--custom--pulsar--carousel--pagination-color-active, var(--accent-color));
	--pagination-offset: var(--wp--custom--pulsar--carousel--pagination-offset, 20px);
	--toggle-color: var(--wp--custom--pulsar--carousel--toggle-color, #fff);
	--toggle-offset: var(--wp--custom--pulsar--carousel--toggle-offset, 20px);

	.splide__arrows {
		display: flex;
		justify-content: space-between;
		left: 0;
		pointer-events: none;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 100%;
		z-index: 1;
	}

	.splide__arrow {
		align-items: center;
		background-color: unset;
		border: unset;
		box-shadow: unset;
		color: var(--arrow-color);
		cursor: pointer;
		display: flex;
		height: 32px;
		justify-content: center;
		pointer-events: all;
		transition: color var(--transition-duration) linear;
		width: 32px;

		&::before {
			background-color: currentcolor;
			content: "";
			display: block;
			height: 100%;
			mask-image: url("../../assets/svg/arrow-right.svg");
			mask-position: center;
			mask-repeat: no-repeat;
			mask-size: contain;
			width: 100%;
		}

		&:hover {
			color: var(--arrow-color-active);
		}

		&:where(:disabled) {
			opacity: 0.3;
			pointer-events: none;
		}

		&--prev::before {
			mask-image: url("../../assets/svg/arrow-left.svg");
		}
	}

	.splide__pagination {
		align-items: center;
		bottom: var(--pagination-offset);
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		left: 0;
		margin: 0;
		padding: 0;
		pointer-events: none;
		position: absolute;
		right: 0;

		button {
			background: var(--pagination-color);
			border: 0;
			border-radius: 50%;
			cursor: pointer;
			display: inline-block;
			height: 10px;
			margin: 3px;
			padding: 0;
			position: relative;
			transition: background-color var(--transition-duration) linear, transform var(--transition-duration) linear;
			width: 10px;

			&:where(.is-active) {
				background: var(--pagination-color-active);
				transform: scale(1.4);
				z-index: 1;
			}
		}
	}

	.splide__toggle {
		align-items: center;
		background: unset;
		border: unset;
		bottom: var(--toggle-offset);
		color: var(--toggle-color);
		cursor: pointer;
		display: flex;
		justify-content: center;
		position: absolute;
		right: var(--toggle-offset);

		> * {
			&::before {
				background-color: currentcolor;
				content: "";
				display: inline-block;
				height: 24px;
				mask-position: center;
				mask-repeat: no-repeat;
				mask-size: contain;
				width: 24px;
			}
		}
	}

	.splide__toggle__pause {
		&::before {
			mask-image: url("../../assets/svg/pause.svg");
		}
	}

	.splide__toggle__play {
		&::before {
			mask-image: url("../../assets/svg/play.svg");
		}
	}

	.splide__progress {
		background: #ccc;
	}

	.splide__progress__bar {
		background-color: var(--accent-color);
		height: 2px;
		transition-property: width;
		transition-timing-function: ease;
		width: 0;
	}
}