@layer components {
  :root {
    --icon-size: 1.2em;
  }
  @media (min-width: 450px) {
    :root {
      --icon-size: 1.5em;
    }
  }

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

  .icon--arrow-left {
    --svg: url("/assets/arrow-left-71c8c8ab.svg");
  }

  .icon--plus {
    --svg: url("/assets/plus-c3c96bbd.svg");
  }

  .icon--filter {
    --svg: url("/assets/filter-900fde2a.svg");
  }

  .icon--search {
    --svg: url("/assets/search-e4d82211.svg");
  }
}