/* ABOUTME: Styles for slider navigation controls (prev/next buttons and pagination dots). */
/* ABOUTME: Used by content_blocks, content_tiles, and other slider sections. */
.slider-controls {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 1rem;
}

.slider-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
}

.pagination-dot {
	width: 2rem;
	height: 0.5rem;
	/* border-radius: 50%; */
	background-color: transparent;
	border: 2px solid var(--section-text-color, var(--text-color));
	margin: 0 5px;
	cursor: pointer;
	opacity: 0.6;
	transition: background-color 0.3s ease, border-color 0.3s ease;
	border-radius: 3px;
}

.pagination-dot.active {
	background-color: var(--section-text-color, var(--text-color));
	border-color: var(--section-text-color, var(--text-color));
	opacity: 1;
}

.slider-controls button {
	padding: 4px 8px;
	cursor: pointer;
	border: none;
	border-radius: 100%;
	font-size: 1.5rem;
	aspect-ratio: 1;
	border-color: var(--section-text-color, var(--text-color));
	color: var(--section-text-color, var(--text-color));
}

.slider-controls button:focus-visible {
	outline: 2px solid var(--section-text-color, var(--color-dark-blue));
	outline-offset: 2px;
}

.pagination-dot:focus-visible {
	outline: 2px solid var(--section-text-color, var(--color-dark-blue));
	outline-offset: 2px;
}

.slider-controls {
	display: none;
}