/* ==========================================================================
   Design system: icons (Material Symbols, 24 × 24)
   Usage: <span class="icon icon-search" aria-hidden="true"></span>
   The icon takes the text color (currentColor): it is a CSS mask
   cut from the .svg file in public/ds/icons/.
   Sizes: default 24 · .icon--20 · .icon--16

   Adding an icon: drop the .svg into public/ds/icons/, then add its line
   below (alphabetical order).
   (The designer's export inlined the SVGs here with a script, only so that
   the mockup works over file://; not needed on the site.)
   ========================================================================== */

.icon {
  display: inline-block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.icon--20 {
  width: 20px;
  height: 20px;
}

.icon--16 {
  width: 16px;
  height: 16px;
}

/* Masks used by other components (checkbox, logo) */
.ds {
  --mask-check: url("/ds/icons/check.svg");
  --mask-check-indeterminate: url("/ds/icons/check-indeterminate-small.svg");
  --mask-logo: url("../images/logo-mad.svg");
}

.icon-account-circle { --icon: url("../icons/account-circle.svg"); }
.icon-add-2 { --icon: url("../icons/add-2.svg"); }
.icon-add { --icon: url("../icons/add.svg"); }
.icon-apartment { --icon: url("../icons/apartment.svg"); }
.icon-arrow-drop-down { --icon: url("../icons/arrow-drop-down.svg"); }
.icon-arrow-forward { --icon: url("../icons/arrow-forward.svg"); }
.icon-arrow-outward { --icon: url("../icons/arrow-outward.svg"); }
.icon-arrow-right { --icon: url("../icons/arrow-right.svg"); }
.icon-bookmark-star { --icon: url("../icons/bookmark-star.svg"); }
.icon-cancel { --icon: url("../icons/cancel.svg"); }
.icon-chat-bubble { --icon: url("../icons/chat-bubble.svg"); }
.icon-check-circle { --icon: url("../icons/check-circle.svg"); }
.icon-check-indeterminate-small { --icon: url("../icons/check-indeterminate-small.svg"); }
.icon-check { --icon: url("../icons/check.svg"); }
.icon-checkbox-off { --icon: url("../icons/checkbox-off.svg"); }
.icon-checkbox-on { --icon: url("../icons/checkbox-on.svg"); }
.icon-chevron-down { --icon: url("../icons/chevron-down.svg"); }
.icon-chevron-left { --icon: url("../icons/chevron-left.svg"); }
.icon-chevron-right { --icon: url("../icons/chevron-right.svg"); }
.icon-chevron-up { --icon: url("../icons/chevron-up.svg"); }
.icon-close { --icon: url("../icons/close.svg"); }
.icon-content-copy { --icon: url("../icons/content-copy.svg"); }
.icon-delete { --icon: url("../icons/delete.svg"); }
.icon-discord { --icon: url("../icons/discord.svg"); }
.icon-distance { --icon: url("../icons/distance.svg"); }
.icon-drag-indicator { --icon: url("../icons/drag-indicator.svg"); }
.icon-error { --icon: url("../icons/error.svg"); }
.icon-facebook { --icon: url("../icons/facebook.svg"); }
.icon-format-list-bulleted { --icon: url("../icons/format-list-bulleted.svg"); }
.icon-format-list-numbered { --icon: url("../icons/format-list-numbered.svg"); }
.icon-github { --icon: url("../icons/github.svg"); }
.icon-info { --icon: url("../icons/info.svg"); }
.icon-instagram { --icon: url("../icons/instagram.svg"); }
.icon-language { --icon: url("../icons/language.svg"); }
.icon-local-mall { --icon: url("../icons/local-mall.svg"); }
.icon-location-on { --icon: url("../icons/location-on.svg"); }
.icon-menu { --icon: url("../icons/menu.svg"); }
.icon-pause { --icon: url("../icons/pause.svg"); }
.icon-person { --icon: url("../icons/person.svg"); }
.icon-play-arrow { --icon: url("../icons/play-arrow.svg"); }
.icon-remove { --icon: url("../icons/remove.svg"); }
.icon-search { --icon: url("../icons/search.svg"); }
.icon-share { --icon: url("../icons/share.svg"); }
.icon-shopping-cart { --icon: url("../icons/shopping-cart.svg"); }
.icon-unfold-more { --icon: url("../icons/unfold-more.svg"); }
.icon-upload { --icon: url("../icons/upload.svg"); }
.icon-verified-profile { --icon: url("../icons/verified-profile.svg"); }
.icon-verified { --icon: url("../icons/verified.svg"); }
.icon-visibility-off { --icon: url("../icons/visibility-off.svg"); }
.icon-visibility { --icon: url("../icons/visibility.svg"); }
.icon-warning { --icon: url("../icons/warning.svg"); }
.icon-youtube { --icon: url("../icons/youtube.svg"); }