/* AquariumLesson achievement/challenge artwork */

.al-badge-art {
  display: block;
  width: 64px;
  height: 64px;
  max-width: none;
  flex: 0 0 64px;
  object-fit: contain;
  filter: none;
  opacity: 1;
  transition: filter 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.al-badge-art--challenge {
  width: 60px;
  height: 60px;
  flex-basis: 60px;
}

.al-badge-art--history {
  width: 26px;
  height: 26px;
  flex-basis: 26px;
}

.al-badge-card[data-state="locked"] .al-badge-art,
.al-goal-card[data-state="locked"] .al-badge-art,
.al-challenge-card[data-state="locked"] .al-badge-art {
  filter: grayscale(.92) saturate(.35);
  opacity: .42;
}

.al-badge-card[data-state="progress"] .al-badge-art,
.al-goal-card[data-state="progress"] .al-badge-art,
.al-challenge-card[data-state="progress"] .al-badge-art {
  filter: saturate(.9);
  opacity: .9;
}

.al-badge-card[data-state="complete"] .al-badge-art,
.al-goal-card[data-state="complete"] .al-badge-art,
.al-challenge-card[data-state="complete"] .al-badge-art {
  filter: saturate(1.08) contrast(1.02);
  opacity: 1;
}

@media (hover: hover) {
  .al-badge-card[data-state="complete"]:hover .al-badge-art,
  .al-goal-card[data-state="complete"]:hover .al-badge-art,
  .al-challenge-card[data-state="complete"]:hover .al-badge-art {
    transform: translateY(-1px) scale(1.025);
  }
}

#alMemberArea #alAchievements :is(.al-badge-card__icon, .al-goal-card__icon) {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#alMemberArea #alAchievements .al-challenge-card__icon {
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#alMemberArea #alAchievements .al-recent-badge__icon,
#alMemberArea #alProfile .alpp-ach-ico,
#alProfile .alpp-ach-ico {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#alMemberArea #alAchievements .al-recent-badge__icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
}

#alMemberArea #alProfile .alpp-ach-ico,
#alProfile .alpp-ach-ico {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
}

.al-badge-art-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
}

@media (max-width: 767px) {
  .al-badge-art {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
  }

  .al-badge-art--challenge {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
  }

  .al-badge-art--history {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }

  #alMemberArea #alAchievements :is(.al-badge-card__icon, .al-goal-card__icon) {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
  }

  #alMemberArea #alAchievements .al-challenge-card__icon {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
  }

  #alMemberArea #alAchievements .al-recent-badge__icon,
  #alMemberArea #alProfile .alpp-ach-ico,
  #alProfile .alpp-ach-ico {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
  }
}