/* Shared icon set
   ===============
   One arrow, one check, one chevron, drawn on the same 24-unit box at the same
   stroke weight (public/images/icons/), painted through a CSS mask so each takes
   the colour of the text it sits beside.

   What this replaced: four near-identical PNG arrows (white, black, orange, and
   a duplicate white under a second hash) at 27x23, every one of them drawn into
   a 20x15 box. 27:23 squeezed into 20:15 is a 13% vertical crush, which is why
   the design review read the arrows as "thinner than the label" — they were
   literally flattened. A mask holds the aspect ratio and inherits the colour, so
   there is no per-colour copy to keep in sync and nothing to squash.

   Sizing is by em, so an arrow scales with whatever text it follows instead of
   being pinned at 20px next to a 16px label and a 30px one alike. */

.icon {
  display: inline-block;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Two classes, so these win on specificity over the per-component `.xx-btn-arrow`
   rules still in the partials. Those were written for an <img> and several say
   `height: auto`, which on a <span> resolves to zero — the icon would vanish.
   Their margins are left alone; only the geometry is taken back. */
.icon.icon--arrow-right {
  /* 24:17, the artwork's own ratio. */
  height: 0.7em;
  width: calc(0.7em * 24 / 17);
  max-width: none;
  min-width: 0;
  background-image: none;
}

.icon.icon--check {
  height: 0.85em;
  width: 0.85em;
  max-width: none;
  background-image: none;
}

.icon.icon--chevron-down {
  height: 0.5em;
  width: calc(0.5em * 24 / 14);
  max-width: none;
  background-image: none;
}

.icon--arrow-right {
  -webkit-mask-image: url("/images/icons/arrow-right.svg");
  mask-image: url("/images/icons/arrow-right.svg");
}

.icon--check {
  -webkit-mask-image: url("/images/icons/check.svg");
  mask-image: url("/images/icons/check.svg");
}

.icon--chevron-down {
  -webkit-mask-image: url("/images/icons/chevron-down.svg");
  mask-image: url("/images/icons/chevron-down.svg");
}

/* Optical alignment.
   The arrows carried `margin-top: -5px`, which lifted them off the text's
   middle and onto its cap line — the second half of the review's note about the
   success-story link. Flex centring puts the icon on the line box's middle,
   which for Calibre sits a touch above the visual centre of mixed-case text, so
   a fractional nudge back down finishes it. Applied here rather than per
   component, so every arrow on the site is aligned the same way. */
.icon.icon--arrow-right,
.icon.icon--chevron-down {
  position: relative;
  top: 0.04em;
  margin-top: 0;
}

/* Buttons that never declared a text colour.
   Their labels were coloured by an inner `.is-white` div, so the anchor itself
   inherited the user-agent link blue. That was invisible while the arrow was a
   PNG and became a blue arrow the moment it started following currentColor.
   Naming the colour on the button is the fix — and the labels inside are the
   same colour they always were. */
.button-hero-dark,
.button-hero-dark-outline,
.button-hero-dark-outline-2,
.block-btn-dark,
.block-btn-on-orange {
  color: #fff;
}

/* Solution icons
   ==============
   The twelve subjects from scripts/generate-icons.mjs, one mask each.

   The accordion used to hold two rasters per row — a grey PNG for the closed
   state and an animated GIF that resolved to solid black for the open one — and
   that black glyph beside a 600-weight H3 is the weight mismatch the design
   review called out. There is one asset per row now and it takes the row's own
   colour, so "open" reads as the icon and its title darkening together rather
   than the icon jumping a whole weight class ahead of the type. */

.comp-accord-icon {
  width: 24px;
  height: 24px;
  /* The row sets its own colour and the icon follows; nothing to swap. */
  transition: color .2s ease;
}

.comp-accord-icon--system-replatform { -webkit-mask-image: url("/images/icons/system-replatform.svg"); mask-image: url("/images/icons/system-replatform.svg"); }
.comp-accord-icon--integrations { -webkit-mask-image: url("/images/icons/integrations.svg"); mask-image: url("/images/icons/integrations.svg"); }
.comp-accord-icon--tech-stack { -webkit-mask-image: url("/images/icons/tech-stack.svg"); mask-image: url("/images/icons/tech-stack.svg"); }
.comp-accord-icon--enterprise-shopify { -webkit-mask-image: url("/images/icons/enterprise-shopify.svg"); mask-image: url("/images/icons/enterprise-shopify.svg"); }
.comp-accord-icon--composable-commerce { -webkit-mask-image: url("/images/icons/composable-commerce.svg"); mask-image: url("/images/icons/composable-commerce.svg"); }
.comp-accord-icon--tech-adoption { -webkit-mask-image: url("/images/icons/tech-adoption.svg"); mask-image: url("/images/icons/tech-adoption.svg"); }
.comp-accord-icon--omnichannel { -webkit-mask-image: url("/images/icons/omnichannel.svg"); mask-image: url("/images/icons/omnichannel.svg"); }
.comp-accord-icon--market-expansion { -webkit-mask-image: url("/images/icons/market-expansion.svg"); mask-image: url("/images/icons/market-expansion.svg"); }
.comp-accord-icon--accessibility { -webkit-mask-image: url("/images/icons/accessibility.svg"); mask-image: url("/images/icons/accessibility.svg"); }
.comp-accord-icon--ecommerce-funnel { -webkit-mask-image: url("/images/icons/ecommerce-funnel.svg"); mask-image: url("/images/icons/ecommerce-funnel.svg"); }
.comp-accord-icon--subscription-retention { -webkit-mask-image: url("/images/icons/subscription-retention.svg"); mask-image: url("/images/icons/subscription-retention.svg"); }
.comp-accord-icon--cro-experimentation { -webkit-mask-image: url("/images/icons/cro-experimentation.svg"); mask-image: url("/images/icons/cro-experimentation.svg"); }

/* Closed rows sit back; the open row comes forward with its title. Two colours
   for two states, where before there were two image files. */
.comp-accord-item .comp-accord-icon { color: var(--ink-muted); }
.comp-accord-item.is-active .comp-accord-icon { color: var(--ink); }
.comp-accord-block .label-h2-light ~ * .comp-accord-item .comp-accord-icon,
.surface-dark .comp-accord-item .comp-accord-icon { color: var(--ink-soft); }
.surface-dark .comp-accord-item.is-active .comp-accord-icon { color: #fff; }

/* Carousel controls. The last two raster arrows on the site: `arrow_next_hover`
   and `arrow_prev_hover`, two files for one shape pointing two ways. One mask,
   flipped. */
.slider-arrow-glyph {
  height: 18px;
  width: calc(18px * 24 / 17);
  color: var(--ink);
}

.slider-arrow-glyph.is-prev {
  transform: scaleX(-1);
}