/*
 * Icon styles for Lucide SVG icons.
 * Icons are loaded via icon_tag helper.
 */
@layer components {
  .icon {
    block-size: 1.25em;
    display: inline-block;
    fill: none;
    flex-shrink: 0;
    inline-size: 1.25em;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    vertical-align: -0.2em;
  }

  /* Size modifiers */
  .icon--small {
    block-size: 1em;
    inline-size: 1em;
  }

  .icon--large {
    block-size: 1.5em;
    inline-size: 1.5em;
  }

  .icon--x-large {
    block-size: 2em;
    inline-size: 2em;
  }

  /* Color modifiers */
  .icon--muted {
    color: var(--color-ink-dark);
  }

  .icon--negative {
    color: var(--color-negative);
  }

  .icon--positive {
    color: var(--color-positive);
  }

  /* Spacing when icon is beside text */
  .icon + span,
  .icon + strong,
  span + .icon,
  strong + .icon {
    margin-inline-start: 0.25em;
  }
}