.nav-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  border: 0;
  border-radius: 0;
  background: currentColor;
  opacity: 0.78;
  -webkit-mask: var(--nav-icon-url) center / contain no-repeat;
  mask: var(--nav-icon-url) center / contain no-repeat;
}

.nav-icon::before,
.nav-icon::after {
  display: none;
}

.overview-icon { --nav-icon-url: url("/assets/icons/layout-dashboard.svg"); }
.board-icon { --nav-icon-url: url("/assets/icons/panel-top.svg"); }
.referrals-icon { --nav-icon-url: url("/assets/icons/network.svg"); }
.gifts-icon { --nav-icon-url: url("/assets/icons/gift.svg"); }
.stats-icon { --nav-icon-url: url("/assets/icons/chart-no-axes-column-increasing.svg"); }
.admin-icon { --nav-icon-url: url("/assets/icons/shield-check.svg"); }

.nav-item:hover .nav-icon,
.nav-item.is-active .nav-icon {
  opacity: 1;
}

.refresh-symbol {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 0;
  background: currentColor;
  -webkit-mask: url("/assets/icons/refresh-cw.svg") center / contain no-repeat;
  mask: url("/assets/icons/refresh-cw.svg") center / contain no-repeat;
}

.metric-card {
  isolation: isolate;
  overflow: hidden;
}

.metric-card > .metric-label,
.metric-card > strong {
  position: relative;
  z-index: 1;
}

.metric-card .metric-mark {
  position: absolute;
  right: 12px;
  bottom: -17px;
  width: 96px;
  height: 96px;
  border: 0;
  border-radius: 0;
  background: #101820;
  box-shadow: none;
  opacity: 0.055;
  pointer-events: none;
  transform: rotate(-7deg);
  -webkit-mask: var(--metric-icon) center / contain no-repeat;
  mask: var(--metric-icon) center / contain no-repeat;
}

.metric-status { --metric-icon: url("/assets/icons/shield-check.svg"); }
.metric-level { --metric-icon: url("/assets/icons/layers.svg"); }
.metric-position { --metric-icon: url("/assets/icons/crown.svg"); }
.metric-gift { --metric-icon: url("/assets/icons/gift.svg"); }
.metric-notifications { --metric-icon: url("/assets/icons/bell.svg"); }
.metric-invited { --metric-icon: url("/assets/icons/user-plus.svg"); }
.metric-confirmed { --metric-icon: url("/assets/icons/badge-check.svg"); }
.metric-received { --metric-icon: url("/assets/icons/hand-heart.svg"); }
.metric-users { --metric-icon: url("/assets/icons/users-round.svg"); }
.metric-active { --metric-icon: url("/assets/icons/activity.svg"); }
.metric-boards { --metric-icon: url("/assets/icons/panel-top.svg"); }
.metric-default { --metric-icon: url("/assets/icons/layout-dashboard.svg"); }

@media (max-width: 620px) {
  .nav-icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
  }

  .metric-card .metric-mark {
    right: 8px;
    bottom: -12px;
    width: 76px;
    height: 76px;
  }
}