/* ============================================================
   BADGE — Figma 74:10625
   ------------------------------------------------------------
       <span class="ice-badge" data-hue="fire">2</span>
       <span class="ice-badge" data-size="m" data-hue="sea">
         <i data-icon="bell"></i>2</span>

   Two sizes, three hues, always filled. A badge never sits on
   glass — it is the warm break in the cold palette, so it carries
   its own gradient and a shadow of the hue's dark end under the
   label.

   Every value is written straight onto the property from Judi's
   variables — no carrier, and no semantic layer either: the three
   hues are identical on both surfaces, so they read the palette
   directly rather than going through the contract. Each hue rule
   reads like its Figma panel.
   ============================================================ */

.ice-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  color: var(--white);

  /* Default = s. */
  block-size: var(--height-2xs);
  min-inline-size: var(--height-2xs);
  padding-inline: var(--space-8);
  gap: var(--space-2);
  border-radius: var(--radius-9);

  font-size: var(--type-body-s-size);
  font-weight: var(--weight-semibold);
  line-height: var(--type-body-s-leading);
  letter-spacing: var(--type-body-s-track);
}

.ice-badge > .ice-icon { inline-size: var(--icon-xs); block-size: var(--icon-xs); flex-shrink: 0; }

.ice-badge[data-size="m"] {
  block-size: var(--height-xs);
  min-inline-size: var(--height-xs);
  padding-inline: var(--space-10);
  gap: var(--space-2);
  border-radius: var(--radius-12);
}
.ice-badge[data-size="m"] > .ice-icon { inline-size: var(--icon-s); block-size: var(--icon-s); }

/* An icon lifts the badge off the page — a badge without one sits
   flat, with no shadow and no blur. */
.ice-badge:has(> .ice-icon:first-child) {
  box-shadow: var(--shadow-s);
  backdrop-filter: blur(var(--shadow-s-blur));
  -webkit-backdrop-filter: blur(var(--shadow-s-blur));
}

/* Next to a label it also pulls the leading edge in, and at size m
   steps the label up to Body-M. NOT when it is alone: :has() is
   more specific than [data-icon-only], so without the :not() the
   leading padding survives and pushes the lone icon off centre. */
.ice-badge:has(> .ice-icon:first-child):not([data-icon-only]) {
  padding-inline-start: var(--space-6);
}
.ice-badge[data-size="m"]:has(> .ice-icon:first-child):not([data-icon-only]) {
  padding-inline-start: var(--space-8);
  gap: var(--space-4);
  font-size: var(--type-body-m-size);
  line-height: var(--type-body-m-leading);
  letter-spacing: var(--type-body-m-track);
}

.ice-badge[data-icon-only] { inline-size: var(--height-2xs); padding-inline: 0; gap: 0; }
.ice-badge[data-size="m"][data-icon-only] { inline-size: var(--height-xs); }

/* --- The hues ------------------------------------------------
   Three of them are one linear gradient to the top right with a
   label shadow in the hue's own dark end at 40%. The fourth is not
   a hue at all — see `low` below.                               */
.ice-badge,
.ice-badge[data-hue="fire"] {
  background-image: linear-gradient(var(--glass-dir), var(--vivid-red-500), var(--vivid-yellow-300));
  text-shadow: 0 1px 3px color-mix(in srgb, var(--vivid-peach-700) 40%, transparent);
}
.ice-badge[data-hue="sea"] {
  background-image: linear-gradient(var(--glass-dir), var(--vivid-blue-600), var(--vivid-turquoise-200));
  text-shadow: 0 1px 3px color-mix(in srgb, var(--vivid-blue-700) 40%, transparent);
}
.ice-badge[data-hue="night"] {
  background-image: linear-gradient(var(--glass-dir), var(--vivid-blue-900), var(--vivid-blue-600));
  text-shadow: 0 1px 3px color-mix(in srgb, var(--vivid-blue-900) 40%, transparent);
}

/* Low — the quiet one. Figma 74:10835.

   Not a colour: the same glass the outlined neutral chip is made of,
   with the ice-blue-400 stroke and the two corner glows. It carries
   shadow S whether or not it holds an icon — the other three sit
   flat on the page, this one is glass and has to lift off it.

   Its label is the emphasis scale rather than white-on-hue, so it
   needs no text shadow to hold.                                   */
.ice-badge[data-hue="low"] {
  border: var(--border-w) solid var(--ice-blue-400);
  background-image:
    radial-gradient(50% 50% at 0% 100%, color-mix(in srgb, var(--vivid-blue-100) 50%, transparent), transparent),
    radial-gradient(50% 50% at 100% 0%, color-mix(in srgb, var(--vivid-turquoise-50) 30%, transparent), transparent),
    var(--elev-primary-2-image);
  box-shadow: var(--shadow-s);
  backdrop-filter: blur(var(--shadow-s-blur));
  -webkit-backdrop-filter: blur(var(--shadow-s-blur));
  color: var(--fg-low);
  text-shadow: none;
}
.ice-badge[data-hue="low"] > .ice-icon { color: var(--fg-icon-low); }

/* --- Anchored to a control ----------------------------------- */
.ice-badge-anchor { position: relative; display: inline-flex; }
.ice-badge-anchor > .ice-badge {
  position: absolute;
  inset-block-start: calc(var(--space-4) * -1);
  inset-inline-end: calc(var(--space-4) * -1);
  pointer-events: none;
}

/* --- Two shapes that predate the sheet -----------------------
   `dot` and `status` are used by the digest screen and are not in
   Figma 74:10625. Kept as they were rather than dropped.         */
.ice-badge[data-variant="dot"] {
  inline-size: var(--space-8);
  min-inline-size: var(--space-8);
  block-size: var(--space-8);
  padding-inline: 0;
  border-radius: var(--radius-full);
}
.ice-badge[data-variant="status"] {
  block-size: var(--height-2xs);
  min-inline-size: 0;
  padding-inline: var(--space-6);
  gap: var(--space-4);
  border-radius: var(--radius-6);

  font-size: var(--type-caps-s-size);
  line-height: var(--type-caps-s-leading);
  letter-spacing: var(--type-caps-s-track);
  text-transform: uppercase;

  background-image: linear-gradient(var(--glass-dir), var(--chip-fill-from), var(--chip-fill-to));
  color: var(--chip-fg);
  text-shadow: none;
  opacity: .8;
}