/**
 * Official documentation: https://sass-lang.com/documentation/at-rules/mixin
 * Mixins should contain optional arguments whenever possible to promote flexibility for reuse.
 * 
*/
/**
* Mixin to generate data table fixed column css
* Vuetify datatable does not support fixed col
* https://github.com/vuetifyjs/vuetify/issues/4652
*/
/**
* Mixin for fallback if browser doesn't support aspect-ratio
* https://caniuse.com/mdn-css_properties_aspect-ratio
* https://css-tricks.com/aspect-ratio-boxes/
**/
/**
* Mixin for @font-face declarations
*  $family:    The name of the font-family to define.
*  $dir:       The directory where the font file is located.
*  $filename:  The name of the font file (excluding extension).
*  $weight:    (Optional) The font weight (default: 400).
*  $style:     (Optional) The font style (default: normal).
*  $format:    (Optional) The font format (default: 'woff2').
*
*  Example usage:
*  @include font-face('Andika', 'base/Andika', 'Andika-Bold', 700, normal);
*/
.label-component {
  display: inline-flex;
  max-width: 100%;
  margin: 0.25rem;
  margin-left: 0;
  cursor: default;
}
.label-component .bx--tooltip__trigger {
  margin-left: 0;
  cursor: pointer;
}
.label-component .bx--tooltip__trigger span {
  cursor: pointer;
}
.label-component span {
  font-family: "Noto Sans", Arial, sans-serif;
  font-size: 0.733rem;
  font-weight: 700;
  line-height: 0.933rem;
  letter-spacing: 0.16px;
}
@media only screen and (min-width: 1056px) {
.label-component span {
    font-size: 0.813rem;
    line-height: 0.938rem;
}
}
.label-component span {
  padding: 0.25rem 0.5rem;
  cursor: default;
}
.label-component.alp-stage {
  border-radius: 5px;
}
.label-component.alp-stage span {
  display: inline-block;
  background-color: #2b63d9;
  color: #ffffff;
  border-radius: 5px;
  text-transform: uppercase;
}
.label-component.alp-stage.ACTIVATE span {
  background-color: #1aa3ad;
}
.label-component.alp-stage.PROMOTE span {
  background-color: #af75d2;
}
.label-component.alp-stage.FACILITATE span {
  background-color: #f48e43;
}
.label-component.alp-stage.MONITOR span {
  background-color: #e57984;
}
.label-component.assigned span {
  font-family: "Noto Sans", Arial, sans-serif;
  font-size: 0.733rem;
  font-weight: 700;
  line-height: 0.933rem;
  letter-spacing: 0.16px;
}
@media only screen and (min-width: 1056px) {
.label-component.assigned span {
    font-size: 0.813rem;
    line-height: 0.938rem;
}
}
.label-component.assigned span {
  color: #e7e9ec;
  background-color: #546579;
  border-radius: 5px;
}
.label-component.class-group span, .label-component.level-and-course span, .label-component.community span {
  font-family: "Noto Sans", Arial, sans-serif;
  font-size: 0.688rem;
  font-weight: 700;
  line-height: 0.875rem;
  letter-spacing: 0.16px;
  background-color: var(--tinted-color, #ffffff);
  color: var(--shaded-color, #6d7b8c);
  border-radius: 5px;
}
.label-component.class-group span {
  text-transform: uppercase;
}
.label-component.community-status.not-joined span {
  text-transform: uppercase;
  color: #ffffff;
  background-color: #546579;
  border-radius: 5px;
}
.label-component.external-resource span {
  font-family: "Noto Sans", Arial, sans-serif;
  font-size: 0.688rem;
  font-weight: 700;
  line-height: 0.875rem;
  letter-spacing: 0.16px;
  padding: 0.125rem 0.5rem;
  text-transform: uppercase;
  color: #ffffff;
  background-color: #3c4f65;
  border-radius: 5px;
}
.label-component.location span {
  font-family: "Noto Sans", Arial, sans-serif;
  font-size: 0.688rem;
  font-weight: 700;
  line-height: 0.875rem;
  letter-spacing: 0.16px;
  padding: 0.125rem 0.5rem;
  text-transform: uppercase;
  color: #ffffff;
  background-color: #8c5ea8;
  border-radius: 5px;
}
.label-component.game-choice span {
  font-family: "Noto Sans", Arial, sans-serif;
  font-size: 0.813rem;
  font-weight: 700;
  letter-spacing: 0.16px;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  text-transform: uppercase;
  color: #ffffff;
  background-color: #1db8c2;
  border-radius: 5px;
}
.label-component.subject span {
  font-family: "Noto Sans", Arial, sans-serif;
  font-size: 0.688rem;
  font-weight: 700;
  line-height: 0.875rem;
  letter-spacing: 0.16px;
  color: var(--subject-text-color);
  background-color: var(--color, #ffffff);
  border-radius: 5px;
}
.label-component.creditor.blank span {
  cursor: default;
}
.label-component.creditor span {
  color: #2b63d9;
  background-color: rgb(212.6, 223.8, 247.4);
  border-radius: 0.9375rem;
  font-weight: 400;
  cursor: pointer;
}
.label-component.creditor-moe span {
  color: #6d7b8c;
  background-color: #ced3d9;
  border-radius: 0.9375rem;
  font-weight: 400;
  cursor: default;
}
.label-component.assignment-status.not-started span, .label-component.attempt-status.not-started span {
  text-transform: uppercase;
  color: #ffffff;
  background-color: #9da7b2;
  border-radius: 5px;
}
.label-component.assignment-status.incomplete span, .label-component.assignment-status.draft span, .label-component.attempt-status.incomplete span, .label-component.attempt-status.draft span {
  text-transform: uppercase;
  color: #644b02;
  background-color: #fbbc04;
  border-radius: 5px;
}
.label-component.assignment-status.complete span, .label-component.attempt-status.complete span {
  text-transform: uppercase;
  color: #ffffff;
  background-color: #2b63d9;
  border-radius: 5px;
}
.label-component.assignment-status.overdue span, .label-component.attempt-status.overdue span {
  text-transform: uppercase;
  color: #ffffff;
  background-color: #c14149;
  border-radius: 5px;
}
.label-component.assignment-status.restricted span, .label-component.attempt-status.restricted span {
  text-transform: uppercase;
  color: #ffffff;
  background-color: #b6bdc5;
  border-radius: 5px;
}
.label-component.assignment-status.upcoming span, .label-component.attempt-status.upcoming span {
  text-transform: uppercase;
  color: #ffffff;
  background-color: #ced3d9;
  border-radius: 5px;
}
.label-component.assignment-status.paused span, .label-component.attempt-status.paused span {
  text-transform: uppercase;
  color: #ffffff;
  background-color: #546579;
  border-radius: 5px;
}
.label-component.quiz-status.not-started span, .label-component.activity-status.not-started span, .label-component.section-status.not-started span {
  text-transform: uppercase;
  color: #ffffff;
  background-color: #9da7b2;
  border-radius: 5px;
}
.label-component.quiz-status.incomplete span, .label-component.activity-status.incomplete span, .label-component.section-status.incomplete span {
  text-transform: uppercase;
  color: #644b02;
  background-color: #fbbc04;
  border-radius: 5px;
}
.label-component.quiz-status.complete span, .label-component.quiz-status.release span, .label-component.activity-status.complete span, .label-component.activity-status.release span, .label-component.section-status.complete span, .label-component.section-status.release span {
  text-transform: uppercase;
  color: #ffffff;
  background-color: #2b63d9;
  border-radius: 5px;
}
.label-component.quiz-status.pending-mark span, .label-component.quiz-status.marked span, .label-component.activity-status.pending-mark span, .label-component.activity-status.marked span, .label-component.section-status.pending-mark span, .label-component.section-status.marked span {
  text-transform: uppercase;
  color: #ffffff;
  background-color: #f3812f;
  border-radius: 5px;
}
.label-component.quiz-status.overdue span, .label-component.activity-status.overdue span, .label-component.section-status.overdue span {
  text-transform: uppercase;
  color: #ffffff;
  background-color: #c14149;
  border-radius: 5px;
}
.label-component.quiz-status.restricted span, .label-component.activity-status.restricted span, .label-component.section-status.restricted span {
  text-transform: uppercase;
  color: #ffffff;
  background-color: #b6bdc5;
  border-radius: 5px;
}
.label-component.quiz.incomplete span {
  text-transform: uppercase;
  color: #644b02;
  background-color: #fbbc04;
  border-radius: 5px;
}
.label-component.quiz.completed span {
  text-transform: uppercase;
  color: #ffffff;
  background-color: #2b63d9;
  border-radius: 5px;
}
.label-component.quiz.pending-mark span {
  text-transform: uppercase;
  color: #ffffff;
  background-color: #f3812f;
  border-radius: 5px;
}
.label-component.quiz.marked span {
  text-transform: uppercase;
  color: #ffffff;
  background-color: #2b63d9;
  border-radius: 5px;
}
.label-component.quiz.overdue span {
  text-transform: uppercase;
  color: #ffffff;
  background-color: #c14149;
  border-radius: 5px;
}
.label-component.quiz.blank span {
  color: #ffffff;
  background-color: #ced3d9;
  border-radius: 5px;
}
.label-component.quiz.pending-quiz-score span {
  text-transform: uppercase;
  color: #ffffff;
  background-color: #95a7bc;
  border-radius: 5px;
}
.label-component.domain span {
  color: #ffffff;
  text-transform: uppercase;
  background-color: #5682e0;
  border-radius: 5px;
  font-family: "Noto Sans", Arial, sans-serif;
  font-size: 0.688rem;
  font-weight: 700;
  line-height: 0.875rem;
  letter-spacing: 0.16px;
}
@media only screen and (min-width: 1056px) {
.label-component.domain span {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
}
.label-component.domain.community span {
  background-color: #3ea2a9;
}
.label-component.domain.moe span {
  background-color: #e96a6a;
}
.label-component.domain.als span {
  font-family: "Noto Sans", Arial, sans-serif;
  font-size: 0.733rem;
  font-weight: 400;
  line-height: 0.933rem;
  letter-spacing: 0.16px;
}
@media only screen and (min-width: 1056px) {
.label-component.domain.als span {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
}
.label-component.domain.als span {
  background-color: #d5e0f7;
  color: #112857;
  border-radius: 24px;
}
.label-component.resource-status.resubmission span {
  background-color: #2b63d9;
  color: #ffffff;
  border-radius: 5px;
  text-transform: uppercase;
}
.label-component.resource-status.approved span {
  background-color: #67b717;
  color: #ffffff;
  border-radius: 5px;
}
.label-component.resource-status.draft span, .label-component.resource-status.pending-unpublish span, .label-component.resource-status.pending-approval span {
  background-color: #2b63d9;
  color: #ffffff;
  border-radius: 5px;
}
.label-component.resource-status.rejected span {
  background-color: #fbbc04;
  color: #750e13;
  border-radius: 5px;
}
.label-component.resource-status.archived span {
  background-color: #9da7b2;
  color: #1a1a1a;
  border-radius: 5px;
}
.label-component.resource-status.unpublished span {
  background-color: #c14149;
  color: #ffffff;
  border-radius: 5px;
}
.label-component.no-error span {
  color: #c14149;
  border: 1px solid #c14149;
  border-radius: 5px;
}
.label-component.section-range {
  color: #2b63d9;
  background-color: #d5e0f7;
  border-radius: 5px;
}
.label-component.resource-prerequisite span {
  cursor: pointer;
  text-transform: uppercase;
  color: #ffffff;
  background-color: #2b63d9;
  border-radius: 5px;
}
.label-component.audit-account-status.complete span, .label-component.audit-account-status.activated span, .label-component.audit-account-status.removed span {
  text-transform: uppercase;
  color: #ffffff;
  background-color: #2b63d9;
  border-radius: 5px;
}
.label-component.audit-account-status.deactivated span {
  text-transform: uppercase;
  color: #ffffff;
  background-color: #546579;
  border-radius: 5px;
}
.label-component.audit-account-status.incomplete span {
  text-transform: uppercase;
  color: #644b02;
  background-color: #fbbc04;
  border-radius: 5px;
}
.label-component.content-mastery span {
  font-family: "Noto Sans", Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25rem;
  letter-spacing: 0;
}
@media only screen and (min-width: 1056px) {
.label-component.content-mastery span {
    font-size: 1rem;
    line-height: 1.375rem;
}
}
.label-component.content-mastery span {
  color: #546579;
  background-color: rgba(84, 101, 121, 0.1);
  border-radius: 5px;
}
.label-component.new span {
  font-family: "Noto Sans", Arial, sans-serif;
  font-size: 0.688rem;
  font-weight: 700;
  line-height: 0.875rem;
  letter-spacing: 0.16px;
  height: 18px;
  background-color: #2b63d9;
  color: #ffffff;
  border-radius: 5px;
}
.label-component.gamified {
  height: 18px;
  position: relative;
  align-items: center;
  border-radius: 5px;
  text-transform: uppercase;
}
.label-component.gamified::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  height: auto;
  width: auto;
  padding: 0.125rem;
  background: linear-gradient(90deg, #e7af04, #9c6904);
  border-radius: inherit;
  -webkit-mask: linear-gradient(#ffffff 0 0) content-box, linear-gradient(#ffffff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.label-component.gamified span {
  font-family: "Noto Sans", Arial, sans-serif;
  font-size: 0.688rem;
  font-weight: 700;
  line-height: 0.875rem;
  letter-spacing: 0.16px;
  background: linear-gradient(90deg, #e7af04, #9c6904);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.label-component.als-content-mastery span {
  font-family: "Noto Sans", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.375rem;
  letter-spacing: 0;
  color: #546579;
  background-color: rgba(84, 101, 121, 0.1);
  border-radius: 5px;
}
.label-component.attempt span {
  font-family: "Noto Sans", Arial, sans-serif;
  font-size: 0.733rem;
  font-weight: 700;
  line-height: 0.933rem;
  letter-spacing: 0.16px;
  color: #ffffff;
  background-color: #546579;
  border-radius: 5px;
}
.label-component.als-session-attempt span {
  color: #ffffff;
  text-transform: uppercase;
  background-color: #f3812f;
  border-radius: 5px;
  font-family: "Noto Sans", Arial, sans-serif;
  font-size: 0.688rem;
  font-weight: 700;
  line-height: 0.875rem;
  letter-spacing: 0.16px;
}
@media only screen and (min-width: 1056px) {
.label-component.als-session-attempt span {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
}
.label-component.content-map-status.not-published span {
  display: inline-flex;
  align-items: center;
  color: #ffffff;
  background-color: #ced3d9;
  border-radius: 10px;
  font-size: 0;
  height: 18px;
}
.label-component.content-map-status.not-published span:before {
  font-family: "Noto Sans", Arial, sans-serif;
  font-size: 0.733rem;
  font-weight: 700;
  line-height: 0.933rem;
  letter-spacing: 0.16px;
  content: "-";
  color: #ffffff;
}
.label-component.content-map-status.published span {
  font-family: "Noto Sans", Arial, sans-serif;
  font-size: 0.733rem;
  font-weight: 700;
  line-height: 0.933rem;
  letter-spacing: 0.16px;
  background-color: #2b63d9;
  color: #ffffff;
  border-radius: 5px;
}
.label-component.app-enabled span {
  font-family: "Noto Sans", Arial, sans-serif;
  font-size: 0.733rem;
  font-weight: 700;
  line-height: 0.933rem;
  letter-spacing: 0.16px;
  background-color: #2b63d9;
  color: #ffffff;
  border-radius: 10px;
}
.label-component.node-prerequisite {
  margin-left: 0.5rem;
}
.label-component.node-prerequisite span {
  background-color: #2b63d9;
  color: #ffffff;
  border-radius: 5px;
  cursor: pointer;
}
.label-component.node-prerequisite.add {
  margin: 0;
}
.label-component.node-prerequisite.add span {
  font-family: "Noto Sans", Arial, sans-serif;
  font-size: 0.813rem;
  font-weight: 700;
  letter-spacing: 0.16px;
  text-transform: uppercase;
  background-color: #ffffff;
  color: #2b63d9;
  cursor: pointer;
}
.label-component.notification-category span {
  font-family: "Noto Sans", Arial, sans-serif;
  font-size: 0.688rem;
  font-weight: 700;
  line-height: 0.875rem;
  letter-spacing: 0.16px;
  border-radius: 5px;
  text-transform: uppercase;
}
.label-component.notification-category.general span {
  background: #0b233f;
  color: #ffffff;
}
.label-component.notification-category.caco span, .label-component.notification-category.school-admin span {
  background: #49270e;
  color: #ffffff;
}
.label-component.game-condition span {
  text-transform: uppercase;
  color: #ffffff;
  background-color: #2b63d9;
  border-radius: 5px;
}
.label-component.xp span {
  border-radius: 5px;
  background-color: #fbbc04;
  color: #ffffff;
}
.label-component.percentage-complete span {
  color: #f3812f;
  background-color: rgba(243, 129, 47, 0.2);
  border-radius: 5px;
}
.label-component {
  /* Whitelist website */
}
.label-component.website-enabled span {
  color: #ffffff;
  background-color: #2b63d9;
  border-radius: 5px;
}
.label-component.recipient span {
  color: #112857;
  background-color: rgb(233.8, 239.4, 251.2);
  border-radius: 20px;
  font-weight: 400;
}
.label-component.conversation span {
  font-family: "Noto Sans", Arial, sans-serif;
  font-size: 0.688rem;
  font-weight: 700;
  line-height: 0.875rem;
  letter-spacing: 0.16px;
  padding: 0.125rem 0.5rem;
  border-radius: 5px;
}
.label-component.conversation.status-online span {
  background-color: #5c9c2a;
  color: #ffffff;
}
.label-component.conversation.info span {
  background-color: rgb(233.8, 239.4, 251.2);
  color: #2b63d9;
}