.dazzle-icon {
  --dazzle-mask: url("/assets/dazzle/star.svg");
  width: 1em;
  height: 1em;
  display: inline-block;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-image: var(--dazzle-mask);
  mask-image: var(--dazzle-mask);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

[data-dazzle="address-card"] { --dazzle-mask: url("/assets/dazzle/address-card.svg"); }
[data-dazzle="arrow-circle-left"] { --dazzle-mask: url("/assets/dazzle/arrow-circle-left.svg"); }
[data-dazzle="box-archive"] { --dazzle-mask: url("/assets/dazzle/box-archive.svg"); }
[data-dazzle="briefcase"] { --dazzle-mask: url("/assets/dazzle/briefcase.svg"); }
[data-dazzle="briefcase-dollar"] { --dazzle-mask: url("/assets/dazzle/briefcase-dollar.svg"); }
[data-dazzle="certificate"] { --dazzle-mask: url("/assets/dazzle/certificate.svg"); }
[data-dazzle="circle-half"] { --dazzle-mask: url("/assets/dazzle/circle-half.svg"); }
[data-dazzle="circle-heart"] { --dazzle-mask: url("/assets/dazzle/circle-heart.svg"); }
[data-dazzle="circle-question"] { --dazzle-mask: url("/assets/dazzle/circle-question.svg"); }
[data-dazzle="compass"] { --dazzle-mask: url("/assets/dazzle/compass.svg"); }
[data-dazzle="crown"] { --dazzle-mask: url("/assets/dazzle/crown.svg"); }
[data-dazzle="dazzle"] { --dazzle-mask: url("/assets/dazzle/dazzle.svg"); }
[data-dazzle="door-open"] { --dazzle-mask: url("/assets/dazzle/door-open.svg"); }
[data-dazzle="gaming-pad"] { --dazzle-mask: url("/assets/dazzle/gaming-pad.svg"); }
[data-dazzle="gear"] { --dazzle-mask: url("/assets/dazzle/gear.svg"); }
[data-dazzle="gem"] { --dazzle-mask: url("/assets/dazzle/gem.svg"); }
[data-dazzle="house-line"] { --dazzle-mask: url("/assets/dazzle/house-line.svg"); }
[data-dazzle="house-smile"] { --dazzle-mask: url("/assets/dazzle/house-smile.svg"); }
[data-dazzle="house-user"] { --dazzle-mask: url("/assets/dazzle/house-user.svg"); }
[data-dazzle="id-card"] { --dazzle-mask: url("/assets/dazzle/id-card.svg"); }
[data-dazzle="knife-kitchen"] { --dazzle-mask: url("/assets/dazzle/knife-kitchen.svg"); }
[data-dazzle="landmark"] { --dazzle-mask: url("/assets/dazzle/landmark.svg"); }
[data-dazzle="lock"] { --dazzle-mask: url("/assets/dazzle/lock.svg"); }
[data-dazzle="message-circle-chat"] { --dazzle-mask: url("/assets/dazzle/message-circle-chat.svg"); }
[data-dazzle="message-circle-chart-lines"] { --dazzle-mask: url("/assets/dazzle/message-circle-chart-lines.svg"); }
[data-dazzle="monitor"] { --dazzle-mask: url("/assets/dazzle/monitor.svg"); }
[data-dazzle="moon-stars"] { --dazzle-mask: url("/assets/dazzle/moon-stars.svg"); }
[data-dazzle="party-horn"] { --dazzle-mask: url("/assets/dazzle/party-horn.svg"); }
[data-dazzle="podium"] { --dazzle-mask: url("/assets/dazzle/podium.svg"); }
[data-dazzle="question"] { --dazzle-mask: url("/assets/dazzle/question.svg"); }
[data-dazzle="rocket"] { --dazzle-mask: url("/assets/dazzle/rocket.svg"); }
[data-dazzle="school"] { --dazzle-mask: url("/assets/dazzle/school.svg"); }
[data-dazzle="send"] { --dazzle-mask: url("/assets/dazzle/send.svg"); }
[data-dazzle="shapes"] { --dazzle-mask: url("/assets/dazzle/shapes.svg"); }
[data-dazzle="star"] { --dazzle-mask: url("/assets/dazzle/star.svg"); }
[data-dazzle="stars"] { --dazzle-mask: url("/assets/dazzle/stars.svg"); }
[data-dazzle="tent"] { --dazzle-mask: url("/assets/dazzle/tent.svg"); }
[data-dazzle="trophy"] { --dazzle-mask: url("/assets/dazzle/trophy.svg"); }
[data-dazzle="thumb-up"] { --dazzle-mask: url("/assets/dazzle/thumb-up.svg"); }
[data-dazzle="thumb-down"] { --dazzle-mask: url("/assets/dazzle/thumb-down.svg"); }
[data-dazzle="university"] { --dazzle-mask: url("/assets/dazzle/university.svg"); }
[data-dazzle="upload"] { --dazzle-mask: url("/assets/dazzle/upload.svg"); }

.header-back .dazzle-icon { width: 24px; height: 24px; }
.round-btn .dazzle-icon { width: 34px; height: 34px; }
.nav-item > .dazzle-icon { width: 31px; height: 31px; }
.avatar .dazzle-icon { width: 58%; height: 58%; }
.score-icon .dazzle-icon { width: 31px; height: 31px; }
.profile-stats > div > span .dazzle-icon { width: 20px; height: 20px; }
.profile-menu b .dazzle-icon { width: 22px; height: 22px; }
.dilemma-box > span .dazzle-icon { width: 30px; height: 30px; }
.badge > .badge-emblem > .dazzle-icon,
.badge-medal > .dazzle-icon { width: 40px; height: 40px; }
.badge-lock {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 999px;
  background: #090b2b;
  color: #ffffff;
  box-sizing: border-box;
}
.badge-lock .dazzle-icon { width: 13px; height: 13px; }
.category-emoji .dazzle-icon { width: 38px; height: 38px; }
.podium-crown .dazzle-icon { width: 52px; height: 34px; }
.podium-crown { color: #ffe66d; }
.place-2 .podium-crown { color: #dce8f7; }
.place-3 .podium-crown { color: #c9793c; }
.ghost .dazzle-icon,
.admin-nav .dazzle-icon { width: 21px; height: 21px; }
.category-tile .dazzle-icon { width: 44px; height: 44px; }
.admin-card-preview .dazzle-icon,
.icon-preview .dazzle-icon { width: 42px; height: 42px; }

@media (max-width: 390px) {
  .nav-item > .dazzle-icon { width: 28px; height: 28px; }
}