/* =============================================================================
   Carousel dots — the buttons assets/js/carousel-dots.js generates (or, on Our
   Work, the ones the markup renders).

   Only the dot itself lives here. The row they sit in — whether it shows at
   all, its gap, its alignment — belongs to each page, because every page hides
   it above 767 in its own way.

   The active dot is keyed on aria-current, not on a class, so what a sighted
   visitor sees and what a screen reader is told cannot disagree.

   A page sets, on the row or any ancestor:

     --carousel-dot-size    width and height     default 10px
     --carousel-dot-radius  corner radius        default 2px
     --carousel-dot-color   an inactive dot      default --color-black
   ========================================================================== */

.carousel-dot {
	flex: none;
	width: var(--carousel-dot-size, 10px);
	height: var(--carousel-dot-size, 10px);
	padding: 0;
	border: 0;
	border-radius: var(--carousel-dot-radius, 2px);
	background: var(--carousel-dot-color, var(--color-black));
	cursor: pointer;
	transition: background var(--transition);
}

.carousel-dot[aria-current="true"] {
	background: var(--color-brand);
}

.carousel-dot:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 3px;
}