/* Icons.
 *
 * An icon is a span painted in a flat colour with an SVG punched out of it as
 * a mask, so the glyph takes currentColor and reacts to hover, .active and
 * dark mode without a second asset. Consequence: one colour per icon, always.
 * Anything multi-colour has to be an <img> or inline SVG instead.
 *
 * To add one: drop a silhouette SVG in app/assets/images/icons/, add a line
 * below, and call icon_tag "name". The SVG's own colours are ignored -- only
 * its alpha channel matters, so it must not carry a background rect.
 *
 * The set is Tabler (https://tabler.io/icons, MIT); the source name follows
 * each entry where it differs from ours. Sizes come from --icon-size, which
 * defaults to 1em so icons scale with the text they sit beside.
 */

@layer components, utilities;

@layer components {
  .icon {
    -webkit-touch-callout: none;
    background-color: currentColor;
    block-size: var(--icon-size, 1em);
    display: inline-block;
    flex-shrink: 0;
    inline-size: var(--icon-size, 1em);
    mask-image: var(--svg);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: var(--icon-size, 1em);
    pointer-events: none;
    position: relative;
    user-select: none;
  }

  /* The escape hatch: a multi-colour mark rendered with image_tag borrows the
     sizing but not the currentColor fill. */
  img.icon {
    background: none;
  }

  /* Chrome
   * ------------------------------------------------------------------------ */
  .icon--logo {
    --svg: url("/assets/logo-f9449539.svg");
    --icon-size: 24px;
  }
  .icon--menu {
    --svg: url("/assets/icons/menu-1d8f8b38.svg");
  } /* menu-2 */
  .icon--account {
    --svg: url("/assets/icons/account-01742123.svg");
  } /* user-circle */
  .icon--add {
    --svg: url("/assets/icons/add-1e2c60e7.svg");
  } /* plus */
  .icon--x {
    --svg: url("/assets/icons/x-b7aecfd4.svg");
  }

  /* Navigation
   * ------------------------------------------------------------------------ */
  .icon--home {
    --svg: url("/assets/icons/home-a6c32db4.svg");
  }
  .icon--list {
    --svg: url("/assets/icons/list-79315389.svg");
  }
  .icon--chart {
    --svg: url("/assets/icons/chart-b9c9b7ab.svg");
  } /* chart-bar */
  .icon--star {
    --svg: url("/assets/icons/star-22ceec36.svg");
  }
  .icon--location {
    --svg: url("/assets/icons/location-904d3bc4.svg");
  } /* map-pin */
  .icon--user {
    --svg: url("/assets/icons/user-2d889a85.svg");
  }
  .icon--lock {
    --svg: url("/assets/icons/lock-f51cf9a9.svg");
  }
  .icon--lock-open {
    --svg: url("/assets/icons/lock-open-d0e457fc.svg");
  }
  .icon--history {
    --svg: url("/assets/icons/history-5763e1d3.svg");
  }
  .icon--shield {
    --svg: url("/assets/icons/shield-9b1c4361.svg");
  }
  .icon--truck {
    --svg: url("/assets/icons/truck-e3bb971f.svg");
  } /* truck-delivery */
  .icon--logout {
    --svg: url("/assets/icons/logout-65a5c48d.svg");
  }
  .icon--grid {
    --svg: url("/assets/icons/grid-dc4b4363.svg");
  } /* layout-grid */

  /* Spaces
   * ------------------------------------------------------------------------ */
  .icon--calories {
    --svg: url("/assets/icons/meal-127f0a17.svg");
  } /* tools-kitchen-2 */
  .icon--notes {
    --svg: url("/assets/icons/notebook-c1114ea7.svg");
  }

  /* Notes editor and search. The text-* toolbar icons, trash and save are
   * Tabler outlines, after flatnotes' toolbar; search, eye, write, check and
   * arrow-right came across from Writebook.
   * ------------------------------------------------------------------------ */
  .icon--search {
    --svg: url("/assets/icons/search-5f29565f.svg");
  }
  .icon--arrow-right {
    --svg: url("/assets/icons/arrow-right-61dca488.svg");
  }
  .icon--eye {
    --svg: url("/assets/icons/eye-0304932f.svg");
  }
  .icon--write {
    --svg: url("/assets/icons/write-f6525fbe.svg");
  }
  .icon--check {
    --svg: url("/assets/icons/check-611182fc.svg");
  }
  .icon--text-bullets {
    --svg: url("/assets/icons/text-bullets-9381b22c.svg");
  }
  .icon--text-numbers {
    --svg: url("/assets/icons/text-numbers-e8ab2eb5.svg");
  }
  .icon--text-checklist {
    --svg: url("/assets/icons/text-checklist-1f5539d4.svg");
  }
  .icon--text-table {
    --svg: url("/assets/icons/text-table-6f1d5458.svg");
  }
  .icon--text-link {
    --svg: url("/assets/icons/text-link-c2ecce1a.svg");
  }
  .icon--text-codeblock {
    --svg: url("/assets/icons/text-codeblock-dd354fe0.svg");
  }
  .icon--trash {
    --svg: url("/assets/icons/trash-94cc589c.svg");
  }
  .icon--save {
    --svg: url("/assets/icons/save-bb572666.svg");
  } /* device-floppy */

  .icon--folder-open {
    --svg: url("/assets/icons/open-folder-cfbca780.svg");
  }

  /* Flash, toasts and validation panels. These carry their own colour rather
   * than currentColor, which is the whole reason the severity is in the class.
   * 20px matches the inline SVGs they replaced.
   * ------------------------------------------------------------------------ */
  .icon--alert,
  .icon--notice,
  .icon--success,
  .icon--danger {
    --icon-size: 20px;
    top: -0.0625em;
  }

  .icon--alert {
    --svg: url("/assets/icons/alert-7fd119fa.svg"); /* alert-triangle */
    background-color: var(--w3-attention);
  }

  .icon--notice {
    --svg: url("/assets/icons/notice-ff03c389.svg"); /* info-circle */
    background-color: var(--w3-accent);
  }

  .icon--success {
    --svg: url("/assets/icons/success-4c3cfc2d.svg"); /* circle-check */
    background-color: var(--w3-success);
  }

  .icon--danger {
    --svg: url("/assets/icons/error-a085945c.svg"); /* circle-x */
    background-color: var(--w3-danger);
  }

  /* Buttons
   * ------------------------------------------------------------------------ */
  .icon--spinner {
    --svg: url("/assets/icons/spinner-d7431e08.svg");
  } /* loader-2 */
}

/* Sizes.
 *
 * Prefer setting --icon-size on the component that owns the icon -- that is
 * how .settings-nav and .space-chip do it, and it keeps sizing out of the
 * markup. These are for the one-offs that do not warrant a component class.
 *
 * The scale is in em so an icon tracks the text beside it. Tabler's outline
 * icons are drawn for 24px with a 2px stroke, so below roughly 20px they read
 * thin -- at the body's 15px that means --icon-size: 1.25em is the practical
 * floor for outline glyphs. Filled ones hold up smaller.
 *
 * These live in a later layer than .icon--* so they win, but any unlayered
 * rule in custom.css still beats them: .settings-nav .icon sets 20px, and a
 * size utility inside that sidebar will not override it.
 */

@layer utilities {
  .icon--lg {
    --icon-size: 2em;
  }
  .icon--3xl {
    --icon-size: 4em;
  }
}