/*
 * Icons are CSS masks, so they take the current text colour and need no icon font or sprite:
 *   <span class="icon icon--star" aria-hidden="true"></span>
 */
@layer components {
  [data-theme] .icon {
    display: inline-block;
    flex: none;
    width: var(--icon-size, 1.25em);
    height: var(--icon-size, 1.25em);
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
    vertical-align: -0.22em;
  }

  [data-theme] {
    .icon--star { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3.2l2.6 5.6 6.1.7-4.5 4.2 1.2 6-5.4-3-5.4 3 1.2-6-4.5-4.2 6.1-.7z' stroke='black' stroke-width='2.4' stroke-linejoin='round'/></svg>"); }
    .icon--lock { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7.5 10.5V7.5a4.5 4.5 0 019 0v3' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/><rect x='4' y='10' width='16' height='11.5' rx='3.5'/></svg>"); }
    .icon--check { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12.8l4.4 4.4L19 7.6' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
    .icon--play { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.5 6v12l10-6z' stroke='black' stroke-width='3' stroke-linejoin='round'/></svg>"); }
    .icon--ball { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9.4' fill='none' stroke='black' stroke-width='2.2'/><path d='M12 7.6l4.2 3-1.6 4.9H9.4l-1.6-4.9z'/><path d='M12 7.6V2.9M16.2 10.6l4.4-1.5M14.6 15.5l2.8 3.9M9.4 15.5l-2.8 3.9M7.8 10.6L3.4 9.1' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>"); }
    .icon--flag { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 3v18' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round'/><path d='M7 4.5h11l-2.6 3.75L18 12H7z' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>"); }
    .icon--medal { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='15' r='6.5'/><path d='M7.5 2.5h3.2l1.8 5h-3.2zM16.5 2.5h-3.2l-1.8 5h3.2z' stroke='black' stroke-width='1.4' stroke-linejoin='round'/></svg>"); }
    .icon--team { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='8.5' cy='8' r='3.7'/><path d='M1.5 20.5a7 7 0 0114 0z' stroke='black' stroke-width='1.2' stroke-linejoin='round'/><circle cx='17.3' cy='9' r='3'/><path d='M17.6 14a5.6 5.6 0 015 6.5h-5a9 9 0 00-2-5.9 5.4 5.4 0 012-.6z'/></svg>"); }
    .icon--clock { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='13' r='8' fill='none' stroke='black' stroke-width='2.4'/><path d='M12 8.5V13l3 2M9.5 2.5h5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
    .icon--alert { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.3 5.2h2.6l-.4 7h-1.8zM12 15.6a1.5 1.5 0 110 3 1.5 1.5 0 010-3z'/></svg>"); }
    .icon--chevron { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 5.5l6.5 6.5L9 18.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
    .icon--plus { --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 5v14M5 12h14' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/></svg>"); }
  }
}