.icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  fill: currentColor;
  stroke: currentColor;
  color: currentColor;
  font-size: 18px;
  vertical-align: middle;
  filter: var(--icon-filter, none);
}

.icon-lg {
  width: auto;
  height: auto;
  font-size: 26px;
}

.icon--sm { width: 16px; height: 16px; }
.icon--md { width: 20px; height: 20px; }
.icon--lg { width: 24px; height: 24px; }

.icon--muted {
  filter: var(--icon-filter-muted, var(--icon-filter));
}

.icon--nofilter {
  filter: none;
}

.icon--spin {
  animation: icon-spin 1s linear infinite;
}

@keyframes icon-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.nav-icon-img {
  width: var(--nav-icon-size);
  height: var(--nav-icon-size);
  object-fit: contain;
  filter: var(--icon-filter, none);
  opacity: 0.95;
  transition: filter var(--transition-fast), opacity var(--transition-fast);
}

.nav-item:hover .nav-icon-img,
.nav-item.active .nav-icon-img {
  filter: none;
  opacity: 1;
}

.nav-icon-svg {
  width: var(--nav-icon-size);
  height: var(--nav-icon-size);
  flex-shrink: 0;
  fill: currentColor;
  stroke: currentColor;
  filter: none;
  pointer-events: none;
}

.main-nav .nav-item:not(.nav-item--profile) .nav-icon-img {
  display: none;
}

.main-nav .nav-item:not(.nav-item--profile)::before {
  content: '';
  width: var(--nav-icon-size);
  height: var(--nav-icon-size);
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: var(--nav-icon-mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: var(--nav-icon-mask);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

#nav-notifications-btn { --nav-icon-mask: url('../assets/icons/notification.svg'); }
#nav-messages-btn { --nav-icon-mask: url('../assets/icons/email.svg'); }
#nav-history-btn { --nav-icon-mask: url('../assets/icons/notes.svg'); }
#nav-people-btn { --nav-icon-mask: url('../assets/icons/People.svg'); }
#nav-missions-btn { --nav-icon-mask: url('../assets/icons/reward.svg'); }
#nav-leaderboard-btn { --nav-icon-mask: url('../assets/icons/trophy.svg'); }
#nav-store-btn { --nav-icon-mask: url('../assets/icons/store.svg'); }
#nav-help-btn { --nav-icon-mask: url('../assets/icons/help.svg'); }
#nav-settings-btn { --nav-icon-mask: url('../assets/icons/settings.svg'); }
#nav-fullscreen-btn { --nav-icon-mask: url('../assets/icons/zoom-in.svg'); }