/**
* Slider arrows — the one place a carousel's prev/next disc is styled.
*
* Two carousels ship on this site and they are built by different code, so
* before this file each drew its own arrows and the two had drifted apart:
*
* .slider-arrow The theme's Slick sliders (team-slider). Markup is
* built in js/kerrigan.js from the carousel-prev /
* carousel-next icons, which PHP hands over — the
* path is no longer duplicated in the script.
*
* .grw-prev / .grw-next The Widget Google Reviews plugin's own buttons
* (testimonials-slider, "Hear from Our Happy
* Customers"). That markup is not ours to change, so
* the plugin's --slider-btn-* knobs are fed from the
* same tokens rather than styled separately.
*
* Reference is the testimonials block, per the developer: a 50px #01963A disc
* with the design's 3px #FBFAF8 outside stroke, a white chevron, and an
* --overlay-green hover. The team slider had no ring and took .btn-round's
* black hover; it follows this now.
*
* Everything visual lives here or in the tokens (css/tokens.css). A block
* stylesheet should only ever say WHERE its arrows sit, never what they look
* like.
*/
/* --- the disc ---------------------------------------------------------- */
.slider-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--slider-arrow-size);
height: var(--slider-arrow-size);
padding: 0;
border: 0;
border-radius: 50%;
background-color: var(--slider-arrow-bg);
/* A spread shadow, not a border: Figma aligns the 3px stroke OUTSIDE, so it
* has to sit outside the 50px box without growing it. */
box-shadow: 0 0 0 var(--slider-arrow-ring) var(--slider-arrow-ring-color);
color: var(--slider-arrow-color);
line-height: 0;
transition: var(--transition);
cursor: pointer;
}
.slider-arrow:hover,
.slider-arrow:focus-visible {
background-color: var(--slider-arrow-bg-hover);
color: var(--slider-arrow-color-hover);
}
.slider-arrow svg {
width: auto;
height: var(--slider-arrow-glyph);
}
/* --- placement -------------------------------------------------------- */
/* The disc hangs --slider-arrow-offset outside the slider band, vertically
* centred on it. The block supplies the positioning context. */
.slider-arrow--prev,
.slider-arrow--next {
position: absolute;
top: 50%;
z-index: 5;
transform: translateY(-50%);
}
.slider-arrow--prev {
left: calc(var(--slider-arrow-offset) * -1);
}
.slider-arrow--next {
right: calc(var(--slider-arrow-offset) * -1);
}
/* --- the plugin's arrows ---------------------------------------------- *
* Same tokens, expressed as the plugin's own custom properties. It sets nearly
* everything !important, but reads these first, so feeding them is how the
* design gets painted — see the note at the top of
* css/blocks/testimonials-slider.css.
*
* The plugin builds the disc from a padded button with a masked pseudo-element
* for the chevron, so the size it wants is the GLYPH's and the padding makes up
* the rest of the disc. Forcing a width on the button instead left the chevron
* off-centre. */
.wp-gr {
--slider-btn-bg: var(--slider-arrow-bg);
--slider-btn-color: var(--slider-arrow-color);
--slider-btn-size: var(--slider-arrow-glyph);
--slider-btn-padding: calc((var(--slider-arrow-size) - var(--slider-arrow-glyph)) / 2);
--slider-btn-bw: 0px;
--slider-btn-bc: transparent;
--slider-btn-shadow: 0 0 0 var(--slider-arrow-ring) var(--slider-arrow-ring-color);
/* The plugin places its disc at `25px - pos` from its own box, the 25 being
* the inset it reserves for the arrows it would otherwise draw over the
* cards (the theme zeroes that inset on the track). So the shared offset has
* to be handed over with the 25 added back — and one token then drives both
* sliders at every width. */
--slider-btn-pos: calc(var(--slider-arrow-offset) + 25px);
}
.wp-gr .grw-prev:hover,
.wp-gr .grw-next:hover {
background-color: var(--slider-arrow-bg-hover) !important;
}
/* The plugin draws its chevron as a masked pseudo-element and ships Lucide's,
* which is a different shape from ours. Same disc, two chevrons. Pointing the
* mask at the same geometry the theme's own arrows use (inc/icons.php
* `carousel-prev` / `carousel-next`) leaves one glyph across both sliders,
* sized by the same --slider-arrow-glyph token.
*
* Keep these paths and the PHP icon in step — they are one glyph in two
* places, because the plugin's markup is not ours to change.
*
* The two buttons do NOT use the same pseudo-element: the plugin draws prev on
* `.rpi-ltgt.rpi-lt::before` and next on `.rpi-ltgt.rpi-gt::after` (its
* `.grw-next::before` has no `content` at all, so a mask put there paints
* nothing). Hence ::before below for prev and ::after for next. */
.wp-gr .grw-prev::before {
mask-image: url("data:image/svg+xml;utf8,") !important;
-webkit-mask-image: url("data:image/svg+xml;utf8,") !important;
}
.wp-gr .grw-next::after {
mask-image: url("data:image/svg+xml;utf8,") !important;
-webkit-mask-image: url("data:image/svg+xml;utf8,") !important;
}
/* --- responsive ------------------------------------------------------- */
/* 1599, not 1440: the discs need the container to be at least
* --slider-arrow-offset off the viewport edge, and that stops being true at
* 1600. Below it they would be pushed to a negative offset and take the page
* sideways with them — a horizontal scrollbar at every laptop width in the
* range.
*
* They come inside the band instead, at its very edge — the offset goes to 0 —
* and each block insets its own slide band by --slider-arrow-gutter so the 50px
* disc still clears the first and last card rather than covering the copy
* underneath.
*
* Zeroing the one token moves both sliders, because both derive their placement
* from it. The testimonials block used to zero the plugin's --slider-btn-pos
* directly, which lands 25px short of its box edge — 10px of each disc was
* sitting on a card. */
@media (max-width: 1599px) {
:root {
--slider-arrow-offset: 0px;
}
}
/* No arrows below 768 — one card per slide and the pager does the work. */
@media (max-width: 767px) {
.slider-arrow--prev,
.slider-arrow--next {
display: none !important;
}
.wp-gr .grw-prev,
.wp-gr .grw-next {
display: none !important;
}
}