@layer components {
  .icon {
    -webkit-touch-callout: none;
    background-color: var(--icon-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;
    pointer-events: none;
    user-select: none;
  }

  .icon--subtle {
    --icon-size: 0.7em;
    --icon-color: var(--color-ink-weak);
  }

  .icon--linklab {
    --svg: url("/linklab/icon.svg");
  }

  .icon--right {
    --svg: url("/assets/icons/chevron-a807dcf9.svg");
  }

  .ti {
    line-height: 1;
    font-size: var(--icon-size, 1em);
  }
}