/* --------------------------------------------------------------
# DotsPlugin
-------------------------------------------------------------- */

:root {
	--overflow-slider-dots-gap: 0.5rem;
	--overflow-slider-dot-size: 0.75rem;
	--overflow-slider-dot-inactive-color: hsla(0, 0%, 0%, 0.1);
	--overflow-slider-dot-active-color: hsla(0, 0%, 0%, 0.8);
}

.overflow-slider__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	ul {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-wrap: wrap;
		gap: var(--overflow-slider-dots-gap);
	}
	li {
		line-height: 0;
		padding: 0;
		margin: 0;
	}
}

.overflow-slider__dot-item {
	padding: 0;
	margin: 0;
	cursor: pointer;
	outline-offset: 2px;
	width: var(--overflow-slider-dot-size);
	height: var(--overflow-slider-dot-size);
	border-radius: 50%;
	background: var(--overflow-slider-dot-inactive-color);
	position: relative;
	// increase clickable area
	&::after {
		content: '';
		display: block;
		left: calc(-1 * var(--overflow-slider-dots-gap));
		top: calc(-1 * var(--overflow-slider-dots-gap));
		right: calc(-1 * var(--overflow-slider-dots-gap));
		bottom: calc(-1 * var(--overflow-slider-dots-gap));
		position: absolute;
	}
	&[aria-pressed="true"],
	&:focus,
	&:hover {
		background: var(--overflow-slider-dot-active-color);
	}
}
