/**
 * Bricksify widget: Hover Band.
 *
 * A band that slides across an element on hover, from jamarea.com's services
 * rows: `::after` in #e1e0e1 with `mix-blend-mode: difference`, from
 * translate3d(0,100%,0) to 0 over 1.25s cubic-bezier(.19,1,.22,1). CSS only.
 *
 * CONTRACT (written by the "Hover Band (Bricksify)" panel)
 *   .bx-band
 *     data-bx-band      invert | fill
 *     data-bx-band-from bottom | top | left | right
 *     --bx-band-color   band colour          (#e1e0e1 invert, currentColor fill)
 *     --bx-band-speed   duration             (1.25s)
 *
 * invert  the band blends with `difference` over the element AND what is
 *         behind it, so text and background swap tones. The element must not
 *         isolate, or there would be nothing to blend with.
 * fill    the band is a plain colour laid BEHIND the content (isolated,
 *         z-index -1); pair it with the panel's "Text colour on hover".
 *
 * Position and overflow are set with zero specificity, so anything the buyer
 * sets on the element wins. Keyboard focus shows the band too.
 */

:where(.bx-band) {
	position: relative;
	overflow: hidden;
}

.bx-band::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--bx-band-color, #e1e0e1);
	mix-blend-mode: difference;
	transform: translate3d(0, 100%, 0);
	transition: transform var(--bx-band-speed, 1.25s) cubic-bezier(.19, 1, .22, 1);
	pointer-events: none;
}

.bx-band[data-bx-band-from="top"]::after {
	transform: translate3d(0, -100%, 0);
}
.bx-band[data-bx-band-from="left"]::after {
	transform: translate3d(-100%, 0, 0);
}
.bx-band[data-bx-band-from="right"]::after {
	transform: translate3d(100%, 0, 0);
}

.bx-band[data-bx-band="fill"] {
	isolation: isolate;
}
.bx-band[data-bx-band="fill"]::after {
	z-index: -1;
	background-color: var(--bx-band-color, currentColor);
	mix-blend-mode: normal;
}

.bx-band[data-bx-band="fill"][style*="--bx-band-text"]:is(:hover, :focus-visible) {
	color: var(--bx-band-text);
}

@media (hover: hover) {
	.bx-band:hover::after {
		transform: translate3d(0, 0, 0);
	}
}

.bx-band:focus-visible {
	outline: none;
}
.bx-band:focus-visible::after,
.bx-band:focus-within:has(:focus-visible)::after {
	transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
	.bx-band::after {
		transition: none;
	}
}