/**
 * The carousel arrow, shared by every carousel on the site.
 *
 * There were three of these: a black disc over the product rows, a white disc
 * with a drop shadow and a chevron on the hero, and a bordered circle holding
 * a "‹" character on the author strip. The live site draws one control
 * everywhere — a black disc with a white arrow that slides in from the edge
 * when the section is pointed at — so this is that control, in one place, and
 * each carousel supplies only where its two sit.
 *
 * Measured from the live page: 44px disc (48 on the hero), an 18px arrow with
 * a tail on a 2px stroke, and a rest state of opacity 0 offset 20px towards
 * the edge it points at.
 */
.gp-carousel-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #000;
	color: var(--wp--preset--color--surface-alt, #fdfdfd);
	cursor: pointer;
	transition:
		opacity 350ms cubic-bezier(0.4, 0, 0.2, 1),
		transform 400ms cubic-bezier(0.4, 0, 0.2, 1),
		background 200ms ease,
		color 200ms ease,
		visibility 200ms;
}

.gp-carousel-nav svg {
	inline-size: 18px;
	block-size: 18px;
	display: block;
}

/* The hero's is a size up, as it is on the live page: it sits over artwork
   rather than beside a row of cards. */
.gp-carousel-nav--lg {
	inline-size: 48px;
	block-size: 48px;
}

.gp-carousel-nav:hover { background: rgba(0, 0, 0, 0.85); }

.gp-carousel-nav:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-green, #064e3b);
	outline-offset: 2px;
}

/* An arrow that cannot move is not drawn at all — the live carousels do the
   same rather than showing a dead control. */
.gp-carousel-nav[hidden] { display: none; }

.gp-carousel-nav:disabled {
	opacity: 0.35;
	cursor: default;
}

/*
 * The reveal.
 *
 * Only where there is a pointer to reveal them with: on a touch screen there
 * is no hover, so the arrows stay where they are rather than becoming
 * permanently invisible. :focus-within is in the list so that tabbing to an
 * arrow brings it into view — the live site leaves keyboard users without
 * that, which is a bug rather than a style.
 */
@media (hover: hover) {
	.gp-carousel-nav {
		opacity: 0;
		visibility: hidden;
	}

	/*
	 * The rest offset points inwards, so the arrow slides out to its place.
	 *
	 * The live site nudges it the other way — the arrow starts outside and
	 * slides in — but a transform still counts towards the page's scroll
	 * width, and an arrow that already hangs over the row's edge would take
	 * the window's horizontal scrollbar with it on any screen without a wide
	 * gutter. Sliding outwards never reaches past where the arrow ends up.
	 */
	.gp-carousel-nav--prev { transform: translateX(20px); }
	.gp-carousel-nav--next { transform: translateX(-20px); }

	.gp-hero:hover .gp-carousel-nav,
	.gp-hero:focus-within .gp-carousel-nav,
	.gp-rail-scope:hover .gp-carousel-nav,
	.gp-rail-scope:focus-within .gp-carousel-nav,
	.gp-product-rail:hover .gp-carousel-nav,
	.gp-product-rail:focus-within .gp-carousel-nav,
	.gp-term-carousel:hover .gp-carousel-nav,
	.gp-term-carousel:focus-within .gp-carousel-nav,
	.gp-category-icons:hover .gp-carousel-nav,
	.gp-category-icons:focus-within .gp-carousel-nav {
		opacity: 1;
		visibility: visible;
		transform: translateX(0);
	}

	/* The reveal above is a class plus :hover plus a class — three, because a
	   pseudo-class counts as one — so it outranks the plain disabled rule
	   further up whatever the order, and an arrow at the end of its travel came
	   back to full strength the moment its carousel was pointed at. Doubled
	   here to reach the same three and win on order. The arrow stays visible,
	   as it was before; it just reads as spent again. */
	.gp-carousel-nav.gp-carousel-nav:disabled { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
	.gp-carousel-nav,
	.gp-carousel-nav--prev,
	.gp-carousel-nav--next {
		transform: none;
		transition: opacity 120ms linear, background 120ms linear, visibility 0s;
	}
}