@layer components {
  /* Mask-based SVG icon system (Fizzy pattern)
   *
   * Uses CSS mask-image to render SVG shapes filled with currentColor.
   * Icons automatically inherit text color from their parent, adapting
   * to button variants, dark mode, hover states, etc.
   *
   * Usage: icon_tag("positive") => <span class="icon icon--positive">
   */

  .icon--positive,
  .icon--negative,
  .icon--yes,
  .icon--ultrasound,
  .icon--list-solid,
  .icon--close-circle,
  .icon--qr-code,
  .icon--copy-paste,
  .icon--hamburger {
    background-color: currentColor;
    block-size: var(--icon-size, 1em);
    display: inline-block;
    inline-size: var(--icon-size, 1em);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: var(--icon-size, 1em);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: var(--icon-size, 1em);
  }

  .icon--positive {
    -webkit-mask-image: url("/assets/positive-835f7c1b.svg");
    mask-image: url("/assets/positive-835f7c1b.svg");
  }

  .icon--negative {
    -webkit-mask-image: url("/assets/negative-faf2544c.svg");
    mask-image: url("/assets/negative-faf2544c.svg");
  }

  .icon--yes {
    -webkit-mask-image: url("/assets/yes-15379c62.svg");
    mask-image: url("/assets/yes-15379c62.svg");
  }

  .icon--ultrasound {
    -webkit-mask-image: url("/assets/ultrasound-1b323ec6.svg");
    mask-image: url("/assets/ultrasound-1b323ec6.svg");
  }

  .icon-screen {
    display: inline-flex;
    border: 1px solid currentColor;
    border-radius: 0.15em;
    padding: 0.10em 0.15em;
  }

  .icon--list-solid {
    -webkit-mask-image: url("/assets/list-solid-0d27a879.svg");
    mask-image: url("/assets/list-solid-0d27a879.svg");
  }

  .icon--close-circle {
    -webkit-mask-image: url("/assets/close-circle-5b7379d6.svg");
    mask-image: url("/assets/close-circle-5b7379d6.svg");
  }

  .icon--qr-code {
    -webkit-mask-image: url("/assets/qr-code-2cf1b7f4.svg");
    mask-image: url("/assets/qr-code-2cf1b7f4.svg");
  }

  .icon--copy-paste {
    -webkit-mask-image: url("/assets/copy-paste-5f563000.svg");
    mask-image: url("/assets/copy-paste-5f563000.svg");
  }

  .icon--hamburger {
    -webkit-mask-image: url("/assets/hamburger-da0f3001.svg");
    mask-image: url("/assets/hamburger-da0f3001.svg");
  }

  /* Prohibition-style overlay for emoji icons */
  .icon--weaning {
    position: relative;
    display: inline-block;
  }

  .icon--weaning::before {
    content: "";
    position: absolute;
    inset: -0.1em;
    border: 3px solid oklch(var(--lch-red-dark) / 0.7);
    border-radius: 50%;
    pointer-events: none;
  }

  .icon--weaning::after {
    content: "";
    position: absolute;
    top: calc(50% - 2px);
    left: -0.1em;
    width: calc(100% + 0.2em);
    height: 3px;
    background: oklch(var(--lch-red-dark) / 0.7);
    transform: rotate(45deg);
    transform-origin: center;
    border-radius: 1px;
    pointer-events: none;
  }
}