/*
 * Icon Component
 * Base icon element and size variants
 */

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

  /* Regular weight icons */
  .icon--arrow-counter-clockwise { --svg: url("/assets/icons/arrow-counter-clockwise-a3959933.svg"); }
  .icon--arrow-left           { --svg: url("/assets/icons/arrow-left-502bf2b3.svg"); }
  .icon--arrow-right          { --svg: url("/assets/icons/arrow-right-39ff27ff.svg"); }
  .icon--book-open            { --svg: url("/assets/icons/book-open-1ad02345.svg"); }
  .icon--book                 { --svg: url("/assets/icons/book-75722100.svg"); }
  .icon--calendar             { --svg: url("/assets/icons/calendar-ebe4f4d4.svg"); }
  .icon--calendar-blank       { --svg: url("/assets/icons/calendar-blank-6c0c9f29.svg"); }
  .icon--caret-down           { --svg: url("/assets/icons/caret-down-e0efdd9e.svg"); }
  .icon--caret-left            { --svg: url("/assets/icons/caret-left-890b180e.svg"); }
  .icon--caret-right          { --svg: url("/assets/icons/caret-right-64ea3571.svg"); }
  .icon--corners-in            { --svg: url("/assets/icons/corners-in-c511ccd7.svg"); }
  .icon--corners-out           { --svg: url("/assets/icons/corners-out-e98ff63b.svg"); }
  .icon--chat                 { --svg: url("/assets/icons/chat-35d062b3.svg"); }
  .icon--chalkboard-teacher   { --svg: url("/assets/icons/chalkboard-teacher-b68ecf48.svg"); }
  .icon--chart-bar            { --svg: url("/assets/icons/chart-bar-4db38973.svg"); }
  .icon--check-circle         { --svg: url("/assets/icons/check-circle-cf2ba4ea.svg"); }
  .icon--check                { --svg: url("/assets/icons/check-3835bfa2.svg"); }
  .icon--clipboard-text       { --svg: url("/assets/icons/clipboard-text-4f032669.svg"); }
  .icon--clock                { --svg: url("/assets/icons/clock-5fcf6847.svg"); }
  .icon--discord-logo         { --svg: url("/assets/icons/discord-logo-f7ba30be.svg"); }
  .icon--door                 { --svg: url("/assets/icons/door-2737bfa9.svg"); }
  .icon--dots-six-vertical    { --svg: url("/assets/icons/dots-six-vertical-5f692719.svg"); }
  .icon--envelope             { --svg: url("/assets/icons/envelope-d577b8ac.svg"); }
  .icon--eye-slash            { --svg: url("/assets/icons/eye-slash-ebbadf4f.svg"); }
  .icon--gear                  { --svg: url("/assets/icons/gear-28b6a52e.svg"); }
  .icon--eye                  { --svg: url("/assets/icons/eye-147854c7.svg"); }
  .icon--file-text            { --svg: url("/assets/icons/file-text-dfa48d44.svg"); }
  .icon--folder-open          { --svg: url("/assets/icons/folder-open-fe9fb516.svg"); }
  .icon--headset              { --svg: url("/assets/icons/headset-9d45c4c1.svg"); }
  .icon--house                { --svg: url("/assets/icons/house-37b7a4c3.svg"); }
  .icon--instagram-logo       { --svg: url("/assets/icons/instagram-logo-032591c2.svg"); }
  .icon--key                  { --svg: url("/assets/icons/key-e3a3a83f.svg"); }
  .icon--list                 { --svg: url("/assets/icons/list-bbf644c5.svg"); }
  .icon--list-magnifying-glass { --svg: url("/assets/icons/list-magnifying-glass-1c806559.svg"); }
  .icon--monitor-play         { --svg: url("/assets/icons/monitor-play-96ed863a.svg"); }
  .icon--moon                 { --svg: url("/assets/icons/moon-c153f599.svg"); }
  .icon--notebook             { --svg: url("/assets/icons/notebook-5224a070.svg"); }
  .icon--paint-brush          { --svg: url("/assets/icons/paint-brush-08100120.svg"); }
  .icon--pause                 { --svg: url("/assets/icons/pause-46bc00d3.svg"); }
  .icon--play                  { --svg: url("/assets/icons/play-1c3a988f.svg"); }
  .icon--path                 { --svg: url("/assets/icons/path-0bbd4c7a.svg"); }
  .icon--pencil-simple        { --svg: url("/assets/icons/pencil-simple-f01df918.svg"); }
  .icon--play-circle          { --svg: url("/assets/icons/play-circle-e38df037.svg"); }
  .icon--plus                 { --svg: url("/assets/icons/plus-de57ba62.svg"); }
  .icon--presentation         { --svg: url("/assets/icons/presentation-f7f28b2e.svg"); }
  .icon--receipt              { --svg: url("/assets/icons/receipt-b04c3293.svg"); }
  .icon--seal-check           { --svg: url("/assets/icons/seal-check-fcf8f187.svg"); }
  .icon--smiley               { --svg: url("/assets/icons/smiley-145e032c.svg"); }
  .icon--sign-in              { --svg: url("/assets/icons/sign-in-f85a363b.svg"); }
  .icon--sign-out             { --svg: url("/assets/icons/sign-out-72722c97.svg"); }
  .icon--speaker-high          { --svg: url("/assets/icons/speaker-high-13ee2220.svg"); }
  .icon--speaker-low           { --svg: url("/assets/icons/speaker-low-6e8a4493.svg"); }
  .icon--speaker-slash         { --svg: url("/assets/icons/speaker-slash-2b27ed16.svg"); }
  .icon--shopping-cart        { --svg: url("/assets/icons/shopping-cart-83195124.svg"); }
  .icon--squares-four         { --svg: url("/assets/icons/squares-four-58727c11.svg"); }
  .icon--star                 { --svg: url("/assets/icons/star-b4a250b8.svg"); }
  .icon--sun                  { --svg: url("/assets/icons/sun-98e0d44e.svg"); }
  .icon--testimonials          { --svg: url("/assets/icons/testimonials-37c258db.svg"); }
  .icon--ticket               { --svg: url("/assets/icons/ticket-dcad67f1.svg"); }
  .icon--user                 { --svg: url("/assets/icons/user-da9289ed.svg"); }
  .icon--users-three          { --svg: url("/assets/icons/users-three-a5f4a6e3.svg"); }
  .icon--video-camera         { --svg: url("/assets/icons/video-camera-3d6483bf.svg"); }
  .icon--warning              { --svg: url("/assets/icons/warning-ccb86e31.svg"); }
  .icon--whatsapp-logo        { --svg: url("/assets/icons/whatsapp-logo-92b925eb.svg"); }
  .icon--x                    { --svg: url("/assets/icons/x-9df76eec.svg"); }
  .icon--x-circle             { --svg: url("/assets/icons/x-circle-148ad851.svg"); }

  /* Bold weight icons */
  .icon--check-circle-bold    { --svg: url("/assets/icons/check-circle-bold-e823ca3f.svg"); }
  .icon--x-circle-bold        { --svg: url("/assets/icons/x-circle-bold-f10c9439.svg"); }

  /* Fill weight icons */
  .icon--arrow-left-fill           { --svg: url("/assets/icons/arrow-left-fill-6ca4e6d3.svg"); }
  .icon--arrow-right-fill          { --svg: url("/assets/icons/arrow-right-fill-f8715294.svg"); }
  .icon--book-open-fill            { --svg: url("/assets/icons/book-open-fill-e0a42ad3.svg"); }
  .icon--book-fill                 { --svg: url("/assets/icons/book-fill-3c27ba44.svg"); }
  .icon--caret-down-fill           { --svg: url("/assets/icons/caret-down-fill-523de997.svg"); }
  .icon--caret-left-fill            { --svg: url("/assets/icons/caret-left-fill-3b193f88.svg"); }
  .icon--caret-right-fill          { --svg: url("/assets/icons/caret-right-fill-8162cabd.svg"); }
  .icon--corners-in-fill            { --svg: url("/assets/icons/corners-in-fill-8ef1c628.svg"); }
  .icon--corners-out-fill           { --svg: url("/assets/icons/corners-out-fill-0212a827.svg"); }
  .icon--calendar-blank-fill       { --svg: url("/assets/icons/calendar-blank-fill-9e8fce09.svg"); }
  .icon--calendar-fill             { --svg: url("/assets/icons/calendar-fill-e43800ec.svg"); }
  .icon--chat-fill                 { --svg: url("/assets/icons/chat-fill-6c5b8b94.svg"); }
  .icon--chalkboard-teacher-fill   { --svg: url("/assets/icons/chalkboard-teacher-fill-76288b98.svg"); }
  .icon--chart-bar-fill            { --svg: url("/assets/icons/chart-bar-fill-0f6e90f7.svg"); }
  .icon--check-circle-fill         { --svg: url("/assets/icons/check-circle-fill-0456cc1f.svg"); }
  .icon--check-fill                { --svg: url("/assets/icons/check-fill-4aaac5cf.svg"); }
  .icon--clipboard-text-fill       { --svg: url("/assets/icons/clipboard-text-fill-6081aa27.svg"); }
  .icon--clock-fill                { --svg: url("/assets/icons/clock-fill-93a1dc74.svg"); }
  .icon--discord-logo-fill         { --svg: url("/assets/icons/discord-logo-fill-0aa6aa10.svg"); }
  .icon--door-fill                 { --svg: url("/assets/icons/door-fill-bd97219c.svg"); }
  .icon--dots-six-vertical-fill    { --svg: url("/assets/icons/dots-six-vertical-fill-a3cdf4c5.svg"); }
  .icon--envelope-fill             { --svg: url("/assets/icons/envelope-fill-33c75fe8.svg"); }
  .icon--eye-slash-fill            { --svg: url("/assets/icons/eye-slash-fill-67fd9d6b.svg"); }
  .icon--gear-fill                  { --svg: url("/assets/icons/gear-fill-79204725.svg"); }
  .icon--eye-fill                  { --svg: url("/assets/icons/eye-fill-9e895612.svg"); }
  .icon--file-text-fill            { --svg: url("/assets/icons/file-text-fill-b663222e.svg"); }
  .icon--folder-open-fill          { --svg: url("/assets/icons/folder-open-fill-5715cdf6.svg"); }
  .icon--headset-fill              { --svg: url("/assets/icons/headset-fill-25d7960e.svg"); }
  .icon--house-fill                { --svg: url("/assets/icons/house-fill-c0586a0b.svg"); }
  .icon--instagram-logo-fill       { --svg: url("/assets/icons/instagram-logo-fill-2bc304b7.svg"); }
  .icon--list-fill                 { --svg: url("/assets/icons/list-fill-e6eaf144.svg"); }
  .icon--list-magnifying-glass-fill { --svg: url("/assets/icons/list-magnifying-glass-fill-ec4b677e.svg"); }
  .icon--monitor-play-fill         { --svg: url("/assets/icons/monitor-play-fill-777571b9.svg"); }
  .icon--moon-fill                 { --svg: url("/assets/icons/moon-fill-59282932.svg"); }
  .icon--notebook-fill             { --svg: url("/assets/icons/notebook-fill-51bdea66.svg"); }
  .icon--paint-brush-fill          { --svg: url("/assets/icons/paint-brush-fill-14015d4b.svg"); }
  .icon--pause-fill                 { --svg: url("/assets/icons/pause-fill-30896a67.svg"); }
  .icon--play-fill                  { --svg: url("/assets/icons/play-fill-528f7e15.svg"); }
  .icon--path-fill                 { --svg: url("/assets/icons/path-fill-13f06612.svg"); }
  .icon--pencil-simple-fill        { --svg: url("/assets/icons/pencil-simple-fill-f9f97f90.svg"); }
  .icon--play-circle-fill          { --svg: url("/assets/icons/play-circle-fill-276aa3f8.svg"); }
  .icon--plus-fill                 { --svg: url("/assets/icons/plus-fill-cb1f119a.svg"); }
  .icon--presentation-fill         { --svg: url("/assets/icons/presentation-fill-2b17d90c.svg"); }
  .icon--receipt-fill              { --svg: url("/assets/icons/receipt-fill-270cfd4a.svg"); }
  .icon--seal-check-fill           { --svg: url("/assets/icons/seal-check-fill-67d83223.svg"); }
  .icon--sign-in-fill              { --svg: url("/assets/icons/sign-in-fill-f16665ed.svg"); }
  .icon--sign-out-fill             { --svg: url("/assets/icons/sign-out-fill-51a5059c.svg"); }
  .icon--speaker-high-fill          { --svg: url("/assets/icons/speaker-high-fill-968db9d6.svg"); }
  .icon--speaker-low-fill           { --svg: url("/assets/icons/speaker-low-fill-b9a23283.svg"); }
  .icon--speaker-slash-fill         { --svg: url("/assets/icons/speaker-slash-fill-8f0a04b1.svg"); }
  .icon--shopping-cart-fill        { --svg: url("/assets/icons/shopping-cart-fill-b393711f.svg"); }
  .icon--squares-four-fill         { --svg: url("/assets/icons/squares-four-fill-5d83e7db.svg"); }
  .icon--star-fill                 { --svg: url("/assets/icons/star-fill-0c70a2a6.svg"); }
  .icon--sun-fill                  { --svg: url("/assets/icons/sun-fill-122f2ccc.svg"); }
  .icon--testimonials-fill          { --svg: url("/assets/icons/testimonials-fill-dfd3b5b0.svg"); }
  .icon--ticket-fill               { --svg: url("/assets/icons/ticket-fill-4172aa74.svg"); }
  .icon--user-fill                 { --svg: url("/assets/icons/user-fill-c34fd074.svg"); }
  .icon--users-three-fill          { --svg: url("/assets/icons/users-three-fill-bd8b6186.svg"); }
  .icon--video-camera-fill         { --svg: url("/assets/icons/video-camera-fill-8b5595dc.svg"); }
  .icon--warning-fill              { --svg: url("/assets/icons/warning-fill-b7d837f6.svg"); }
  .icon--whatsapp-logo-fill        { --svg: url("/assets/icons/whatsapp-logo-fill-ae3c38fd.svg"); }
  .icon--x-fill                    { --svg: url("/assets/icons/x-fill-e1fec4b4.svg"); }
  .icon--x-circle-fill             { --svg: url("/assets/icons/x-circle-fill-401e829f.svg"); }

  .icon-text-size {
    inline-size: 1em;
    block-size: 1em;
    vertical-align: middle;
  }

  /* Inline image icon — matches surrounding text size (for <img> SVGs with animations) */
  .icon-inline {
    display: inline-block;
    inline-size: 1em;
    block-size: 1em;
    vertical-align: middle;
  }

  html[data-theme="dark"] .icon-inline {
    filter: invert(1);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .icon-inline {
      filter: invert(1);
    }
  }

  .icon--xs {
    inline-size: var(--icon-xs);
    block-size: var(--icon-xs);
  }

  .icon--sm {
    inline-size: var(--icon-sm);
    block-size: var(--icon-sm);
  }

  .icon--md {
    inline-size: var(--icon-md);
    block-size: var(--icon-md);
  }

  .icon--lg {
    inline-size: var(--icon-lg);
    block-size: var(--icon-lg);
  }

  .icon--xl {
    inline-size: var(--icon-xl);
    block-size: var(--icon-xl);
  }

  .icon--2xl {
    inline-size: var(--icon-2xl);
    block-size: var(--icon-2xl);
  }

  .icon--xxl {
    inline-size: var(--icon-xxl);
    block-size: var(--icon-xxl);
  }

  /* Icon container — squircle badge with superellipse corners */
  .icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 25%;
    corner-shape: superellipse;
  }

  .icon-container--sm {
    inline-size: 2rem;
    block-size: 2rem;
  }

  .icon-container--md {
    inline-size: 2.5rem;
    block-size: 2.5rem;
  }

  .icon-container--lg {
    inline-size: 3rem;
    block-size: 3rem;
  }

  .icon-container--xl {
    inline-size: 4rem;
    block-size: 4rem;
  }

  .icon-container--bordered {
    border: 1px solid var(--color-gray-light);
  }

  .icon-container--soft {
    background-color: var(--color-gray-lightest);
  }

  .icon-container--green {
    background-color: var(--color-white);
    border: 1px solid var(--color-green-light);
    color: var(--color-green-light);
  }

  .icon-container--red {
    background-color: var(--color-red-light);
    border: 1px solid var(--color-red);
    color: var(--color-red-dark);
  }

  .icon-container--accent {
    background-color: var(--color-green-light);
    border: 1px solid var(--color-green-lightest);
    color: var(--color-green-darkest);
  }

  .icon-container--round {
    border-radius: var(--radius-full);
  }

  .icon-container--tight {
    inline-size: auto;
    block-size: auto;
    padding: 0.4rem;
  }

  .icon-container--dark {
    background-color: var(--color-gray-darker);
    color: var(--color-white);
  }

  /*
   * Icon Swap — regular/fill toggle
   *
   * Shows regular icon by default, swaps to fill when a parent has
   * an --active class. Works with any component: sidebar links,
   * tabs, nav items, etc.
   *
   * Usage:
   *   <a class="some-link some-link--active">
   *     <%= icon_swap("star") %>
   *     Label
   *   </a>
   *
   * The helper renders a zero-size wrapper with both icons inside.
   * Parent's --active modifier (matched via [class*="--active"])
   * triggers the swap automatically.
   */
  .icon-swap {
    display: contents;

    & .icon-swap__fill {
      display: none;
    }
  }

  [class*="--active"] > .icon-swap {
    & .icon-swap__regular {
      display: none;
    }

    & .icon-swap__fill {
      display: inline-block;
    }
  }
}