/* Drop-in Unicode “icon” styling for buttons/labels/etc.
   Uses ONLY --text-color (no extra colors), but still feels a bit “alive”.

   Example:
   <button class="btn" data-icon="close" aria-label="Close"></button>
   <button class="btn" data-icon="ok">Okay</button>
   <button class="btn" data-icon="delete" aria-label="Delete"></button>
*/

:root{
  --icon-color: var(--text-color);
  --icon-size: 1.10em !important;
  --icon-opacity: .86;
  --icon-hover-scale: 1.07;
  --icon-active-scale: .95;

  --shade-01: rgba(0, 0, 0, 0.05);
  --shade-02: rgba(0, 0, 0, 0.10);
}
@media screen and (prefers-color-scheme:dark) {
  :root{
    --shade-01: rgba(255, 255, 255, 0.05);
    --shade-02: rgba(255, 255, 255, 0.1);
  }
}

/* Works on any element with data-icon */
[data-icon]{
  color: var(--icon-color);
  position: relative;
}

/* The actual glyph */
[data-icon]::before{
  font-family: system-ui, "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols2", sans-serif;
  font-size: var(--icon-size);
  font-weight: 300;
  line-height: 1;
  display: inline-block;

  opacity: var(--icon-opacity);
  letter-spacing: 0.02em;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;

  /* subtle “attention” without coloring */
  filter: drop-shadow(0 0 0.55em rgba(0,0,0,.10));

  transition: transform 120ms ease, opacity 120ms ease, filter 120ms ease;
  pointer-events: none;
}

/* Hover/focus/active: tiny lift + crispness */
/* [data-icon]:hover::before{
  opacity: 1;
  transform: translateY(-0.04em) scale(var(--icon-hover-scale));
  filter: drop-shadow(0 0 0.75em rgba(0,0,0,.14));
}

[data-icon]:active::before{
  transform: translateY(-0.04em) scale(var(--icon-active-scale));
} */

/* [data-icon]:focus-visible::before{
  opacity: 1;
  filter: drop-shadow(0 0 0.9em rgba(0,0,0,.18));
} */

/* Optional spacing when you have text in the button */
[data-icon].icon-left::before{ margin-right: .45em; }
[data-icon].icon-right::before{ margin-left: .45em; }

[data-shade="1"]::before {
  padding: 3px;
  background-color: var(--shade-01);
  margin-right: 3px;
  border-radius: 3px;
}
[data-shade="2"]::before {
  padding: 3px;
  background-color: var(--shade-02);
  margin-right: 3px;
  border-radius: 3px;
}
/* -------- Icon map (pick/extend as needed) -------- */
[data-icon="close"]::before  { content:"\2715"; } /* ✕  (alt: "\00D7" ×) */
[data-icon="ok"]::before     { content:"\2713"; } /* ✓  (alt: "\2714" ✔) */
[data-icon="delete"]::before { content:"\232B"; } /* ⌫  (alt: "\2421" ␡) */
[data-icon="trash"]::before  { content:"\01F5D1"; }  /* 🗑 */

[data-icon="add"]::before    { content:"\002B"; } /* + */
[data-icon="remove"]::before { content:"\2212"; } /* − */
[data-icon="edit"]::before   { content:"\270E"; } /* ✎ */
[data-icon="info"]::before   { content:"\2139"; } /* ℹ */
[data-icon="warn"]::before   { content:"\26A0"; } /* ⚠ */
[data-icon="menu"]::before   { content:"\2630"; } /* ☰ */
[data-icon="back"]::before   { content:"\2190"; } /* ← */
[data-icon="next"]::before   { content:"\2192"; } /* → */
[data-icon="clock"]::before { content:"\23F0"; } /* ⏰ */
[data-icon="user"]::before { content:"\1F464"; } /* 👤 */

/* If you *really* want a trash can, this may render as colorful emoji on some OSes:
[data-icon="trash"]::before  { content:"\01F5D1"; }  // 🗑
*/


[data-icon="flag"]::before { content:"\2691"; } /* ⚑ */
[data-icon="arrow-up"]::before   { content:"\2191"; } /* ↑ */
[data-icon="arrow-down"]::before { content:"\2193"; } /* ↓ */
[data-icon="caret-up"]::before   { content:"\25B2"; } /* ▲ */
[data-icon="caret-down"]::before { content:"\25BC"; } /* ▼ */
/* “V” style chevrons (often nicer than arrows) */
[data-icon="chev-up"]::before   { content:"\02C4"; } /* ˄ */
[data-icon="chev-down"]::before { content:"\02C5"; } /* ˅ */