/* ------ buttons ----- */
/* ------ typography ----- */
.msk-label {
  padding: 0 0.5rem;
  border-radius: 0.5rem;
  height: -moz-fit-content;
  height: fit-content;
  width: -moz-fit-content;
  width: fit-content;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.msk-label-blue,
.msk-label-blue .msk-label-icon {
  background-color: #b5cffd;
  color: #002569;
  text-shadow: 0.0625rem 0.0625rem 0 #92b6f5;
}
.msk-label-gray,
.msk-label-gray .msk-label-icon {
  background-color: #e0e0e0;
  color: #393939;
  text-shadow: 0.0625rem 0.0625rem 0 #c6c6c6;
}
.msk-label-cool-gray,
.msk-label-cool-gray .msk-label-icon {
  background-color: #dde1e6;
  color: #343a3f;
  text-shadow: 0.0625rem 0.0625rem 0 #c1c7cd;
}
.msk-label-warm-gray,
.msk-label-warm-gray .msk-label-icon {
  background-color: #e5e0df;
  color: #3c3838;
  text-shadow: 0.0625rem 0.0625rem 0 #cac5c4;
}
.msk-label-cyan,
.msk-label-cyan .msk-label-icon {
  background-color: #bae6ff;
  color: #003a6d;
  text-shadow: 0.0625rem 0.0625rem 0 #82cfff;
}
.msk-label-teal,
.msk-label-teal .msk-label-icon {
  background-color: #aff1eb;
  color: #14423f;
  text-shadow: 0.0625rem 0.0625rem 0 #78e2da;
}
.msk-label-green,
.msk-label-green .msk-label-icon {
  background-color: #c7fcc6;
  color: #0e450d;
  text-shadow: 0.0625rem 0.0625rem 0 #8dde8b;
}
.msk-label-magenta,
.msk-label-magenta .msk-label-icon {
  background-color: #ffc8e3;
  color: #612743;
  text-shadow: 0.0625rem 0.0625rem 0 #ffa5d0;
}
.msk-label-orange,
.msk-label-orange .msk-label-icon {
  background-color: #ffcdaa;
  color: #632900;
  text-shadow: 0.0625rem 0.0625rem 0 #ffab6f;
}
.msk-label-purple,
.msk-label-purple .msk-label-icon {
  background-color: #e7d8ff;
  color: #432f64;
  text-shadow: 0.0625rem 0.0625rem 0 #d6bdff;
}
.msk-label-red,
.msk-label-red .msk-label-icon {
  background-color: #facdcb;
  color: #7a0700;
  text-shadow: 0.0625rem 0.0625rem 0 #f4b1ad;
}
.msk-label-yellow,
.msk-label-yellow .msk-label-icon {
  background-color: #fddc69;
  color: #483700;
  text-shadow: 0.0625rem 0.0625rem 0 #f1c21b;
}
.msk-label-outline {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px #272525;
  color: #272525;
  text-shadow: 0.0625rem 0.0625rem 0 #f7f3f2;
}
.msk-label-high-contrast,
.msk-label-high-contrast .msk-label-icon {
  background-color: #565151;
  color: #ffffff;
  text-shadow: 0.0625rem 0.0625rem 0px #3c3838;
}