/**
 * Product comparison — header counter presentation.
 *
 * Split from compare.css so pages that render the counter but can never open
 * the drawer (checkout, CMS, account, contact — see shouldLoadSurfaces() in
 * kickedcompare.php) can style the header control without carrying the
 * drawer, matrix and toggle styles. Without the drawer script the counter is
 * a plain link to the standalone comparison page, so it stays fully
 * functional on those pages.
 *
 * THEMING CONTRACT
 * ----------------
 * Same contract as compare.css — themes set the --kcp-* properties, never
 * override selectors. This file consumes the subset below; a theme that
 * declares the full set on the shared selector group (as compare.css
 * documents) covers both files at once.
 *
 *   --kcp-ink              counter ink once products are selected
 *   --kcp-control-ink      counter ink at rest
 *   --kcp-accent           hover ink, badge surface
 *   --kcp-accent-ink       badge text
 *   --kcp-accent-tint      hover wash
 *   --kcp-radius-sm        counter corners
 *
 * KEEP THE DEFAULTS BELOW IN LOCKSTEP with the shared block at the top of
 * compare.css — pages that load both files must resolve identical values.
 *
 * Layered for the same reason as compare.css: layered CSS always loses to
 * unlayered CSS, so a host theme's ordinary stylesheet wins outright.
 *
 * @copyright Kicked SRL
 * @license   AFL-3.0
 */

@layer kicked-compare {
  .kicked-compare-counter {
    --kcp-ink: #18181b;
    --kcp-control-ink: #52525b;
    --kcp-accent: #b91c1c;
    --kcp-accent-ink: #fff;
    --kcp-accent-tint: #fef2f2;
    --kcp-radius-sm: 0.625rem;
  }

  .kicked-compare-counter {
    display: inline-flex;
    flex-direction: column;
    gap: 0.1875rem;
    align-items: center;
    padding: 0.375rem 0.625rem;
    font-size: 0.6875rem;
    /* `normal` to match the theme's .header-action beside it — both are an icon
       over an 11px label, and at the inherited 1.6 they set different row
       heights and the header cluster stopped lining up. */
    line-height: normal;
    color: var(--kcp-control-ink);
    text-decoration: none;
    border-radius: var(--kcp-radius-sm);
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
  }

  /* The counter sits in a row of header controls that a host theme also fills —
     a wishlist link, an account link — and it has to answer a pointer the way
     they do, or it reads as decoration rather than as something pressable. This
     is the one treatment every such control shares: the accent on its own tint,
     inside the padding box the control already occupies.

     Through the contract rather than as literals, so a theme that has remapped
     --kcp-accent gets a hover in its own colour and not in the module's red.
     Layered, so a host theme that wants a different hover still wins outright. */
  .kicked-compare-counter:hover,
  .kicked-compare-counter:focus-visible {
    color: var(--kcp-accent);
    background-color: var(--kcp-accent-tint);
  }

  .kicked-compare-counter--on {
    color: var(--kcp-ink);
  }

  .kicked-compare-counter__mark {
    position: relative;
    display: flex;
  }

  .kicked-compare-counter__badge {
    position: absolute;
    top: -0.4375rem;
    right: -0.5625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.0625rem;
    height: 1.0625rem;
    padding: 0 0.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--kcp-accent-ink);
    background: var(--kcp-accent);
    border-radius: 0.5625rem;
  }

  .kicked-compare-counter__badge[hidden] {
    display: none;
  }

  /* Lives here rather than in compare.css because the counter's live region
     uses it and this is the file that is always present; compare.css never
     loads without this one. */
  .kicked-compare-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .kicked-compare-counter:focus-visible {
    outline: 0.125rem solid var(--kcp-accent);
    outline-offset: 0.125rem;
  }
}