/* 图标改色：SVG 使用 currentColor，通过父级 color 或 mask 控制 */

.icon {
  display: inline-block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: inherit;
}

.icon--logo {
  width: 97px;
  height: 19px;
}

/* 外链 SVG 用 mask 继承 currentColor（img 标签无法读 currentColor） */
.icon--mask {
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.icon--mask.icon--search {
  mask-image: url("../images/icons/icon-search.svg");
  -webkit-mask-image: url("../images/icons/icon-search.svg");
}

.icon--mask.icon--language {
  mask-image: url("../images/icons/icon-language.svg");
  -webkit-mask-image: url("../images/icons/icon-language.svg");
}

.icon--mask.icon--menu {
  mask-image: url("../images/icons/icon-menu.svg");
  -webkit-mask-image: url("../images/icons/icon-menu.svg");
}

.icon--mask.icon--scores {
  mask-image: url("../images/icons/icon-scores.svg");
  -webkit-mask-image: url("../images/icons/icon-scores.svg");
}

.icon--mask.icon--news {
  mask-image: url("../images/icons/icon-news.svg");
  -webkit-mask-image: url("../images/icons/icon-news.svg");
}

.icon--mask.icon--logo {
  width: 97px;
  height: 19px;
  mask-image: url("../images/icons/logo-score.svg");
  -webkit-mask-image: url("../images/icons/logo-score.svg");
}

.icon--mask.icon--chevron-left {
  mask-image: url("../images/icons/icon-chevron-left.svg");
  -webkit-mask-image: url("../images/icons/icon-chevron-left.svg");
}

.icon--mask.icon--chevron-right {
  mask-image: url("../images/icons/icon-chevron-right.svg");
  -webkit-mask-image: url("../images/icons/icon-chevron-right.svg");
}

.icon--mask.icon--chevron-up {
  mask-image: url("../images/icons/icon-chevron-up.svg");
  -webkit-mask-image: url("../images/icons/icon-chevron-up.svg");
}

.icon--mask.icon--chevron-down {
  mask-image: url("../images/icons/icon-chevron-down.svg");
  -webkit-mask-image: url("../images/icons/icon-chevron-down.svg");
}

.icon--mask.icon--star-outline {
  mask-image: url("../images/icons/icon-star-outline.svg");
  -webkit-mask-image: url("../images/icons/icon-star-outline.svg");
}

.icon--mask.icon--location {
  width: 12px;
  height: 12px;
  mask-image: url("../images/icons/icon-location.svg");
  -webkit-mask-image: url("../images/icons/icon-location.svg");
}

.icon--mask.icon--media-camera {
  mask-image: url("../images/icons/icon-media-camera.svg");
  -webkit-mask-image: url("../images/icons/icon-media-camera.svg");
}

.icon--mask.icon--media-play {
  mask-image: url("../images/icons/icon-media-play.svg");
  -webkit-mask-image: url("../images/icons/icon-media-play.svg");
}

.icon--mask.icon--media-teams {
  mask-image: url("../images/icons/icon-media-teams.svg");
  -webkit-mask-image: url("../images/icons/icon-media-teams.svg");
}