/* ------ buttons ----- */
/* ------ typography ----- */
.msk-label {
  align-items: center;
  border-radius: 0.5rem;
  display: flex;
  gap: 0.5rem;
  height: -moz-fit-content;
  height: fit-content;
  line-height: 1.5;
  padding: 0 0.5rem;
  width: -moz-fit-content;
  width: fit-content;
}
.msk-label-red,
.msk-label-red .msk-label-icon {
  background-color: var(--msk-color-bg-tag-red, #ffe4e3);
  color: var(--msk-color-content-tag-red, #a80900);
  border: none;
}
.msk-label-magenta,
.msk-label-magenta .msk-label-icon {
  background-color: var(--msk-color-bg-tag-magenta, #fff2f9);
  color: var(--msk-color-content-tag-magenta, #85375c);
  border: none;
}
.msk-label-purple,
.msk-label-purple .msk-label-icon {
  background-color: var(--msk-color-bg-tag-purple, #f7f3ff);
  color: var(--msk-color-content-tag-purple, #5c4583);
  border: none;
}
.msk-label-blue,
.msk-label-blue .msk-label-icon {
  background-color: var(--msk-color-bg-tag-blue, #f0f5ff);
  color: var(--msk-color-content-tag-blue, #113e90);
  border: none;
}
.msk-label-cyan,
.msk-label-cyan .msk-label-icon {
  background-color: var(--msk-color-bg-tag-cyan, #e5f6ff);
  color: var(--msk-color-content-tag-cyan, #00539a);
  border: none;
}
.msk-label-teal,
.msk-label-teal .msk-label-icon {
  background-color: var(--msk-color-bg-tag-teal, #edfffd);
  color: var(--msk-color-content-tag-teal, #215c57);
  border: none;
}
.msk-label-green,
.msk-label-green .msk-label-icon {
  background-color: var(--msk-color-bg-tag-green, #e6ffe6);
  color: var(--msk-color-content-tag-green, #175e15);
  border: none;
}
.msk-label-yellow,
.msk-label-yellow .msk-label-icon {
  background-color: var(--msk-color-bg-tag-yellow, #fcf4d6);
  color: var(--msk-color-content-tag-yellow, #684e00);
  border: none;
}
.msk-label-orange,
.msk-label-orange .msk-label-icon {
  background-color: var(--msk-color-bg-tag-orange, #fff0e4);
  color: var(--msk-color-content-tag-orange, #8a3900);
  border: none;
}
.msk-label-gray,
.msk-label-gray .msk-label-icon {
  background-color: var(--msk-color-bg-tag-gray, #f4f4f4);
  color: var(--msk-color-content-tag-gray, #525252);
  border: none;
}
.msk-label-cool-gray,
.msk-label-cool-gray .msk-label-icon {
  background-color: var(--msk-color-bg-tag-cool-gray, #f2f4f8);
  color: var(--msk-color-content-tag-cool-gray, #4d5358);
  border: none;
}
.msk-label-warm-gray,
.msk-label-warm-gray .msk-label-icon {
  background-color: var(--msk-color-bg-tag-warm-gray, #f7f3f2);
  color: var(--msk-color-content-tag-warm-gray, #565151);
  border: none;
}
.msk-label-high-contrast,
.msk-label-high-contrast .msk-label-icon {
  background-color: var(--msk-color-bg-tag-high-contrast, #393939);
  color: var(--msk-color-content-tag-high-contrast, #ffffff);
  border: none;
}
.msk-label-outline,
.msk-label-outline .msk-label-icon {
  background-color: transparent;
  color: var(--msk-color-content-tag-outline, #393939);
  border: 1px solid var(--msk-color-border-tag-outline, #393939);
}
.msk-label-ghost,
.msk-label-ghost .msk-label-icon {
  background-color: transparent;
  color: var(--msk-color-content-action-secondary, #113e90);
  border: none;
}