/**
 * PhotoCab slider arrows (Blocksy "flexy").
 *
 * Pairs with the icon swap in inc/blocksy.php and covers the same three
 * sliders: the product gallery, its thumbnail pills, and the related
 * products carousel.
 *
 * Blocksy already gives the arrow a 40px circle, white background,
 * absolute positioning and the hover reveal (opacity + a 10px slide-in
 * driven by --translate-x). Only the differences from the prototype are
 * set here.
 *
 * Colours go through Blocksy's own custom properties where it exposes
 * them, so its default rules keep working instead of being fought:
 *
 *   --flexy-nav-arrow-color             idle glyph
 *   --flexy-nav-background-color        idle fill
 *   --flexy-nav-arrow-hover-color       hover glyph
 *   --flexy-nav-background-hover-color  hover fill  (stock: accent fill)
 *   --flexy-nav-arrow-top-offset        vertical centring
 *
 * Size, border, inset and shadow have no variables, so they are plain
 * declarations on `.flexy-container [class*="flexy-arrow"]` - one class
 * deeper than Blocksy's own `[class*="flexy-arrow"]`, which is enough to
 * win without any !important.
 *
 * Scoping to .flexy-container rather than .flexy is deliberate: the
 * gallery and related-products arrows sit directly inside `.flexy`, but
 * the thumbnail arrows sit in a sibling `.flexy-pills`. `.flexy-container`
 * is the only wrapper that holds all three sliders' arrows.
 *
 * Numbers come from the Claude Design prototype ("PhotoCab Product"),
 * arrow()/thumbArrow()/relArrow(); see assets/css/tokens.css.
 */

.flexy-container {
	/* Stock hover is a white glyph on an accent fill; the design keeps the
	   button white and tints the glyph and border instead. */
	--flexy-nav-arrow-color: var(--pc-ink-600);
	--flexy-nav-background-color: var(--pc-surface);
	--flexy-nav-arrow-hover-color: var(--pc-accent-500);
	--flexy-nav-background-hover-color: var(--pc-surface);

	/* Centres the 38px button; Blocksy's default assumes 40px. */
	--flexy-nav-arrow-top-offset: calc(50% - 19px);
}

/* .flexy-pills declares this variable itself, so the value on the
   container above never reaches it - inheritance takes the nearest
   declaring ancestor regardless of selector weight. Hence the restatement.
   Blocksy's own value is calc(50% - 20px + var(--thumbs-spacing) / 2);
   the trailing term compensates for spacing above the thumbnail row, but
   in this gallery layout the row, its <ol> and the thumbnails all share
   one box, so that term has nothing to correct and simply drops the arrow
   ~5px below centre. Worth re-checking if the gallery layout changes. */
.flexy-container .flexy-pills {
	--flexy-nav-arrow-top-offset: calc(50% - 19px);
}

.flexy-container [class*="flexy-arrow"] {
	width: 38px;
	height: 38px;
	border: 1px solid var(--pc-border);
	box-shadow: 0 4px 14px rgba(31, 30, 28, 0.12);

	/* transform stays in the list so Blocksy's slide-in survives; dropping
	   it would make the arrows appear without the movement. */
	transition:
		opacity 220ms ease,
		transform 220ms ease,
		color 200ms ease,
		border-color 200ms ease,
		background-color 200ms ease;
}

.flexy-container .flexy-arrow-prev {
	left: 14px;
}

.flexy-container .flexy-arrow-next {
	right: 14px;
}

.flexy-container [class*="flexy-arrow"]:hover {
	border-color: var(--pc-accent-400);
}

@media (prefers-reduced-motion: reduce) {
	.flexy-container [class*="flexy-arrow"] {
		transition: none;
	}
}