/* Content-specific learning icons shared by every page and age level. */
#learning-menu .learning-card:is(
  [data-program-key="newspaper"],
  [data-program-key="reading-studio"],
  [data-program-key="word-learning"],
  [data-program-key="sentence-learning"],
  [data-program-key="listening-learning"],
  [data-program-key="speaking-learning"],
  [data-program-key="writing-learning"],
  [data-program-key="word-quiz"],
  [data-program-key="reading-quiz"]
) .icon-box svg {
  display: none;
}

#learning-menu .learning-card:is(
  [data-program-key="newspaper"],
  [data-program-key="reading-studio"],
  [data-program-key="word-learning"],
  [data-program-key="sentence-learning"],
  [data-program-key="listening-learning"],
  [data-program-key="speaking-learning"],
  [data-program-key="writing-learning"],
  [data-program-key="word-quiz"],
  [data-program-key="reading-quiz"]
) .icon-box::before {
  content: "";
  width: 31px;
  height: 31px;
  background: currentColor;
  -webkit-mask: var(--learning-icon) center / contain no-repeat;
  mask: var(--learning-icon) center / contain no-repeat;
}

#learning-menu [data-program-key="newspaper"] {
  --learning-icon: url("../img/icons/learning-newspaper.svg");
}

#learning-menu [data-program-key="reading-studio"] {
  --learning-icon: url("../img/icons/learning-reading-studio.svg");
}

#learning-menu [data-program-key="word-learning"] {
  --learning-icon: url("../img/icons/learning-words.svg");
}

#learning-menu [data-program-key="sentence-learning"] {
  --learning-icon: url("../img/icons/learning-sentence.svg");
}

#learning-menu [data-program-key="listening-learning"] {
  --learning-icon: url("../img/icons/learning-listening.svg");
}

#learning-menu [data-program-key="speaking-learning"] {
  --learning-icon: url("../img/icons/learning-speaking.svg");
}

#learning-menu [data-program-key="writing-learning"] {
  --learning-icon: url("../img/icons/learning-writing.svg");
}

#learning-menu [data-program-key="word-quiz"] {
  --learning-icon: url("../img/icons/learning-word-quiz.svg");
}

#learning-menu [data-program-key="reading-quiz"] {
  --learning-icon: url("../img/icons/learning-reading-quiz.svg");
}