.calYear {
  display: flex;
  flex-wrap: wrap;
  margin-top: 1em;
}

.calMonth {
  display: flex;
  flex-direction: column;
  margin-right: 0.5em;
  margin-bottom: 0.5em;
}

.dayWrapper {
  display: flex;
  flex-direction: column;
  height: 7em;
  flex-wrap: wrap;
}

.calDay {
  display: block;
  width: 1em;
  height: 1em;
  box-sizing: border-box;
  cursor: pointer;
  transition: transform 0.2s;
  background-position: center;
  background-size: 16px;

  &:hover.icon {
    transform: scale(1.5);
    z-index: 999;
    box-shadow: 0 0 8px 3px #696969;
    opacity: 1;
  }

  &:before {
    content: ' ';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: invert(1);
    display: block;
    -webkit-mask-size: contain;
    mask-size: contain;
  }

  &.red-war:before {
    -webkit-mask-image: url('../../assets/icons/red-war.png');
    mask-image: url('../../assets/icons/red-war.png');
    background-color: inherit;
  }

  &.curse-of-osiris:before {
    -webkit-mask-image: url('../../assets/icons/curse-of-osiris.png');
    mask-image: url('../../assets/icons/curse-of-osiris.png');
    background-color: inherit;
  }

  &.dawning:before {
    -webkit-mask-image: url('../../assets/icons/dawning.png');
    mask-image: url('../../assets/icons/dawning.png');
    background-color: inherit;
  }

  &.crimson-days:before {
    -webkit-mask-image: url('../../assets/icons/crimson-days.png');
    mask-image: url('../../assets/icons/crimson-days.png');
    background-color: inherit;
  }

  &.warmind:before {
    -webkit-mask-image: url('../../assets/icons/warmind.png');
    mask-image: url('../../assets/icons/warmind.png');
    background-color: inherit;
  }

  &.moments-of-triumph:before {
    -webkit-mask-image: url('../../assets/icons/moments-of-triumph.png');
    mask-image: url('../../assets/icons/moments-of-triumph.png');
    background-color: inherit;
  }

  &.solstice:before {
    -webkit-mask-image: url('../../assets/icons/solstice.png');
    mask-image: url('../../assets/icons/solstice.png');
    background-color: inherit;
  }

  &.forsaken:before {
    -webkit-mask-image: url('../../assets/icons/forsaken.png');
    mask-image: url('../../assets/icons/forsaken.png');
    background-color: inherit;
  }

  &.festival-of-the-lost:before {
    -webkit-mask-image: url('../../assets/icons/festival-of-the-lost.png');
    mask-image: url('../../assets/icons/festival-of-the-lost.png');
    background-color: inherit;
  }

  &.season-of-the-forge:before {
    -webkit-mask-image: url('../../assets/icons/season-of-the-forge.png');
    mask-image: url('../../assets/icons/season-of-the-forge.png');
    background-color: inherit;
  }

  &.season-of-the-drifter:before {
    -webkit-mask-image: url('../../assets/icons/season-of-the-drifter.png');
    mask-image: url('../../assets/icons/season-of-the-drifter.png');
    background-color: inherit;
  }

  &.revelry:before {
    -webkit-mask-image: url('../../assets/icons/revelry.png');
    mask-image: url('../../assets/icons/revelry.png');
    background-color: inherit;
  }

  &.season-of-opulence:before {
    -webkit-mask-image: url('../../assets/icons/season-of-opulence.png');
    mask-image: url('../../assets/icons/season-of-opulence.png');
    background-color: inherit;
  }

  &.shadowkeep:before {
    -webkit-mask-image: url('../../assets/icons/shadowkeep.png');
    mask-image: url('../../assets/icons/shadowkeep.png');
    background-color: inherit;
  }

  &.season-of-the-undying:before {
    -webkit-mask-image: url('../../assets/icons/season-of-the-undying.png');
    mask-image: url('../../assets/icons/season-of-the-undying.png');
    background-color: inherit;
  }

  &.season-of-dawn:before {
    -webkit-mask-image: url('../../assets/icons/season-of-dawn.png');
    mask-image: url('../../assets/icons/season-of-dawn.png');
    background-color: inherit;
  }

  &.season-of-the-worthy:before {
    -webkit-mask-image: url('../../assets/icons/season-of-the-worthy.png');
    mask-image: url('../../assets/icons/season-of-the-worthy.png');
    background-color: inherit;
  }

  &.guardian-games:before {
    -webkit-mask-image: url('../../assets/icons/guardian-games.png');
    mask-image: url('../../assets/icons/guardian-games.png');
    background-color: inherit;
  }

  &.season-of-arrivals:before {
    -webkit-mask-image: url('../../assets/icons/season-of-arrivals.png');
    mask-image: url('../../assets/icons/season-of-arrivals.png');
    background-color: inherit;
  }

  &.beyond-light:before {
    -webkit-mask-image: url('../../assets/icons/beyond-light.png');
    mask-image: url('../../assets/icons/beyond-light.png');
    background-color: inherit;
  }

  &.season-of-the-hunt:before {
    -webkit-mask-image: url('../../assets/icons/season-of-the-hunt.png');
    mask-image: url('../../assets/icons/season-of-the-hunt.png');
    background-color: inherit;
  }

  &.season-of-the-chosen:before {
    -webkit-mask-image: url('../../assets/icons/season-of-the-chosen.png');
    mask-image: url('../../assets/icons/season-of-the-chosen.png');
    background-color: inherit;
  }

  &.season-of-the-splicer:before {
    -webkit-mask-image: url('../../assets/icons/season-of-the-splicer.png');
    mask-image: url('../../assets/icons/season-of-the-splicer.png');
    background-color: inherit;
  }

  &.season-of-the-lost:before {
    -webkit-mask-image: url('../../assets/icons/season-of-the-lost.png');
    mask-image: url('../../assets/icons/season-of-the-lost.png');
    background-color: inherit;
  }

  &.thirtieth-anniversary:before {
    -webkit-mask-image: url('../../assets/icons/thirtieth-anniversary.png');
    mask-image: url('../../assets/icons/thirtieth-anniversary.png');
    background-color: inherit;
  }

  &.witch-queen:before {
    -webkit-mask-image: url('../../assets/icons/witch-queen.png');
    mask-image: url('../../assets/icons/witch-queen.png');
    background-color: inherit;
  }

  &.season-of-the-haunted:before {
    -webkit-mask-image: url('../../assets/icons/season-of-the-haunted.png');
    mask-image: url('../../assets/icons/season-of-the-haunted.png');
    background-color: inherit;
  }

  &.iron-banner:before {
    -webkit-mask-image: url('../../assets/icons/iron-banner.png');
    mask-image: url('../../assets/icons/iron-banner.png');
    background-color: inherit;
  }

  &.solstice2022:before {
    -webkit-mask-image: url('../../assets/icons/solstice2022.png');
    mask-image: url('../../assets/icons/solstice2022.png');
    background-color: inherit;
  }

  &.raid:before {
    -webkit-mask-image: url('../../assets/icons/raid.png');
    mask-image: url('../../assets/icons/raid.png');
    background-color: inherit;
  }

  &.season-of-plunder:before {
    -webkit-mask-image: url('../../assets/icons/season-of-plunder.png');
    mask-image: url('../../assets/icons/season-of-plunder.png');
    background-color: inherit;
  }

  &.dungeon:before {
    -webkit-mask-image: url('../../assets/icons/dungeon.png');
    mask-image: url('../../assets/icons/dungeon.png');
    background-color: inherit;
  }

  &.season-of-the-seraph:before {
    -webkit-mask-image: url('../../assets/icons/season-of-the-seraph.png');
    mask-image: url('../../assets/icons/season-of-the-seraph.png');
    background-color: inherit;
  }

  &.lightfall:before {
    -webkit-mask-image: url('../../assets/icons/lightfall.png');
    mask-image: url('../../assets/icons/lightfall.png');
    background-color: inherit;
  }

  &.season-of-the-deep:before {
    -webkit-mask-image: url('../../assets/icons/season-of-the-deep.png');
    mask-image: url('../../assets/icons/season-of-the-deep.png');
    background-color: inherit;
  }

  &.exotic-quest:before {
    -webkit-mask-image: url('../../assets/icons/exotic-quest.png');
    mask-image: url('../../assets/icons/exotic-quest.png');
    background-color: inherit;
  }

  &.season-of-the-witch:before {
    -webkit-mask-image: url('../../assets/icons/season-of-the-witch.png');
    mask-image: url('../../assets/icons/season-of-the-witch.png');
    background-color: inherit;
  }

  &.season-of-the-wish:before {
    -webkit-mask-image: url('../../assets/icons/season-of-the-wish.png');
    mask-image: url('../../assets/icons/season-of-the-wish.png');
    background-color: inherit;
  }

  &.into-the-light:before {
      -webkit-mask-image: url('../../assets/icons/into-the-light.png');
      mask-image: url('../../assets/icons/into-the-light.png');
      background-color: inherit;
  }

  &.the-final-shape:before {
    -webkit-mask-image: url('../../assets/icons/the-final-shape.png');
    mask-image: url('../../assets/icons/the-final-shape.png');
    background-color: inherit;
  }

  &.episode-echoes:before {
    -webkit-mask-image: url('../../assets/icons/episode-echoes.png');
    mask-image: url('../../assets/icons/episode-echoes.png');
    background-color: inherit;
  }

  &.ten-year-anniversary:before {
    -webkit-mask-image: url('../../assets/icons/10-year-anniversary.png');
    mask-image: url('../../assets/icons/10-year-anniversary.png');
    background-color: inherit;
  }

  &.episode-revenant:before {
    -webkit-mask-image: url('../../assets/icons/episode-revenant.png');
    mask-image: url('../../assets/icons/episode-revenant.png');
    background-color: inherit;
  }

  &.episode-heresy:before {
    -webkit-mask-image: url('../../assets/icons/episode-heresy.png');
    mask-image: url('../../assets/icons/episode-heresy.png');
    background-color: inherit;
  }

  &.rite-of-the-nine:before {
    -webkit-mask-image: url('../../assets/icons/rite-of-the-nine.png');
    mask-image: url('../../assets/icons/rite-of-the-nine.png');
    background-color: inherit;
  }

  &.heavy-metal:before {
    -webkit-mask-image: url('../../assets/icons/heavy-metal.png');
    mask-image: url('../../assets/icons/heavy-metal.png');
    background-color: inherit;
  }

  &.edge-of-fate:before {
    -webkit-mask-image: url('../../assets/icons/edge-of-fate.png');
    mask-image: url('../../assets/icons/edge-of-fate.png');
    background-color: inherit;
  }

  &.arms-week:before {
    -webkit-mask-image: url('../../assets/icons/arms-week.png');
    mask-image: url('../../assets/icons/arms-week.png');
    background-color: inherit;
  }

  &.ash-and-iron:before {
    -webkit-mask-image: url('../../assets/icons/ash-and-iron.png');
    mask-image: url('../../assets/icons/ash-and-iron.png');
    background-color: inherit;
  }
}

@media (prefers-reduced-motion) {
  .calDay {
    transition: none;

    &:hover {
      transform: none;
      box-shadow: none;
      background-image: none;
    }
  }
}

.loading > .calDay {
  cursor: progress;
}

.yearLabel {
  display: flex;
  align-items: center;
}

.yearLabel span {
  font-size: 0.75em;
  display: block;
  transform: rotate(-90deg);
}

.monthSpacer {
  width: 1em;
}

.monthLabel {
  font-size: 0.75em;
  text-align: center;
}

.release {
  &:before {
    width: 100%;
    height: 100%;
  }
}

.raid,
.event {
  &:before {
    width: 100%;
    height: 100%;
  }
}

@media (prefers-color-scheme: dark) {
  .release,
  .raid,
  .event {
    border-color: #333;
  }

  .inactive {
    opacity: 0.15;
  }
}

.spinner {
  -webkit-animation: spin 3s infinite linear;
  animation: spin 3s infinite linear;
  height: 1em;
  width: 1em;
  display: inline-block;
  line-height: 1em;
  font-size: 0.75em;
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spinX {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.errorStatus {
  margin-bottom: 0.5em;
}

.trends-header {
  font-family: Roboto, 'Helvetica Neue', sans-serif;
}
.trending_loading {
  -webkit-animation: spin 3s infinite linear;
  animation: spin 3s infinite linear;
}
.trends {
  font-family: Roboto, 'Helvetica Neue', sans-serif;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;

  .trend-up {
    color: green;
  }

  .trend-down {
    color: red;
  }

  .trend {
    display: flex;
    align-items: center;
    gap: 0.75em;
    min-width: 17em;

    .trend-header {
      display: flex;
      align-items: center;
      gap: 0.25em;

      img {
        height: 1em;
      }
    }

    .trend-time {
      font-size: 0.75em;
      opacity: 0.6;
    }

    .trend-values {
      display: flex;
      gap: 0.75em;
    }
  }
}
