.test {
  color: red;
}

/* Mixins definitions for reusability */
/* Base styles for the checkbox component */
.mgnl-checkbox {
  display: flex;
  align-items: center;
  position: relative;
  user-select: none;
  padding: var(--mgnl-checkbox-md-checkmark-wrapper-padding);
  font-family: var(--mgnl-checkbox-md-typography-font-family);
  font-size: var(--mgnl-checkbox-md-typography-font-size);
  font-weight: var(--mgnl-checkbox-md-typography-font-weight);
  letter-spacing: var(--mgnl-checkbox-md-typography-letter-spacing);
  line-height: var(--mgnl-checkbox-md-typography-line-height);
  /* Base icon styling for the checkbox, including unchecked state */
  /* Hover state styling for the icon */
  /* Indeterminate state styling for the checkbox
     Placed before checked state to follow CSS specificity rules */
  /* Checked state styling for the checkbox 
     Ordered after indeterminate for proper CSS specificity */
  /* Disabled state styling for the checkbox
     Ordered after checked state for proper CSS specificity */
  /* Disabled state styling for the label */
  /* Hover state styling for checked and indeterminate checkboxes
     Most specific rule, placed last to override other states */
}
.mgnl-checkbox__input {
  opacity: 0;
  position: absolute;
}
.mgnl-checkbox__label {
  padding: var(--mgnl-checkbox-md-label-padding);
  color: var(--mgnl-checkbox-md-color-label-default);
}
.mgnl-checkbox:hover .mgnl-checkbox__label {
  color: var(--mgnl-checkbox-md-color-label-hover);
}
.mgnl-checkbox__icon {
  position: relative;
  align-self: flex-start;
  cursor: pointer;
  display: inline-block;
  min-width: 16px;
  min-height: 16px;
  border-radius: var(--mgnl-checkbox-md-border-radius);
  border: var(--mgnl-checkbox-unchecked-border-default);
  margin: var(--mgnl-checkbox-md-checkmark-wrapper-padding);
  margin-right: var(--mgnl-checkbox-md-gap);
  margin-top: 2px;
  background-color: var(--mgnl-checkbox-unchecked-color-fill-default);
  content: " ";
}
.mgnl-checkbox__icon::after {
  transition: all var(--mgnl-animation-duration-50) var(--mgnl-animation-timing-50);
  position: absolute;
  opacity: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--mgnl-checkbox-md-icon-size);
  line-height: var(--mgnl-checkbox-md-icon-size);
}
.mgnl-checkbox:hover .mgnl-checkbox__icon {
  background-color: var(--mgnl-uncheckbox-checked-color-fill-hover);
  border: var(--mgnl-checkbox-unchecked-border-hover);
}
.mgnl-checkbox__input:focus + .mgnl-checkbox__icon {
  border: var(--mgnl-checkbox-unchecked-border-focus);
  box-shadow: var(--mgnl-switch-off-focus-outline-focus);
  outline: none;
}
.mgnl-checkbox__input:focus:checked + .mgnl-checkbox__icon {
  border: var(--mgnl-checkbox-checked-border-focus);
  box-shadow: var(--mgnl-switch-on-focus-outline-focus);
  outline: none;
}
.mgnl-checkbox:has(.mgnl-checkbox__input:indeterminate, .mgnl-checkbox__input--indeterminate) .mgnl-checkbox__icon {
  background-color: var(--mgnl-checkbox-checked-color-fill-default);
  border: var(--mgnl-checkbox-checked-border-default);
}
.mgnl-checkbox:has(.mgnl-checkbox__input:indeterminate, .mgnl-checkbox__input--indeterminate) .mgnl-checkbox__icon::after {
  opacity: 1;
  content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjMzMzMgNEw1Ljk5OTk2IDExLjMzMzNMMi42NjY2MyA4IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMS44MzMzMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");
}
.mgnl-checkbox:has(.mgnl-checkbox__input:indeterminate, .mgnl-checkbox__input--indeterminate) .mgnl-checkbox__icon::after {
  content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMgOEwxMyA4IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+Cjwvc3ZnPgo=");
}
.mgnl-checkbox:has(.mgnl-checkbox__input:checked) .mgnl-checkbox__icon {
  background-color: var(--mgnl-checkbox-checked-color-fill-default);
  border: var(--mgnl-checkbox-checked-border-default);
}
.mgnl-checkbox:has(.mgnl-checkbox__input:checked) .mgnl-checkbox__icon::after {
  opacity: 1;
  content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjMzMzMgNEw1Ljk5OTk2IDExLjMzMzNMMi42NjY2MyA4IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMS44MzMzMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");
}
.mgnl-checkbox:has(.mgnl-checkbox__input:disabled) .mgnl-checkbox__icon {
  border: var(--mgnl-checkbox-unchecked-border-disabled);
  background-color: var(--mgnl-checkbox-checked-color-fill-disabled);
  cursor: not-allowed;
}
.mgnl-checkbox:has(.mgnl-checkbox__input:disabled) .mgnl-checkbox__label {
  color: var(--mgnl-checkbox-checked-color-label-disabled);
}
.mgnl-checkbox:has(.mgnl-checkbox__input:checked):hover .mgnl-checkbox__icon, .mgnl-checkbox:has(.mgnl-checkbox__input--indeterminate, .mgnl-checkbox__input--indeterminate:indeterminate):hover .mgnl-checkbox__icon {
  background-color: var(--mgnl-checkbox-checked-color-fill-hover);
  border-color: var(--mgnl-checkbox-checked-color-fill-hover);
}