body {
  --checkbox-text-mask-spacing: 8px;
  --checkbox-mask-height: 18px;
  --checkbox-mask-border-width: 2px;
  --checkbox-mask-border-radius: var(--border-radius-medium);
  --checkbox-mask-color-border_checked: var(--brand-color);
  --checkbox-mask-color-bg_checked: var(--brand-color);
  --checkbox-mask-color-border_hover: var(--brand-color-hover);
  --checkbox-indeterminate-color-bg: #fff;
  --checkbox-color-indeterminate-icon-height: 2px;
  --checkbox-color-indeterminate-icon-width: 10px;
  --checkbox-color-check-icon: transparent;
  --checkbox-color-checked-icon: #fff;
  --checkbox-size-check-icon: 12px;
  --checkbox-mask-color-border: var(--border-level-2-color);
  --checkbox-mask-color-border_disabled: var(--border-level-2-color);
  --checkbox-mask-color-border_checked_disabled: var(--brand-color-disabled);
  --checkbox-mask-color-bg_checked_disabled: var(--brand-color-disabled);
  --checkbox-mask-color-bg_disabled: var(--bg-color-component-disabled);
  --checkbox-color-text_disabled: var(--text-color-disabled);
  --checkbox-group-spacing: 16px;
  --checkbox-group-size-line-height_vertical: 16px;
}
.mx-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  line-height: unset;
  position: relative;
}
.mx-checkbox > input[type='checkbox'] {
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}
.mx-checkbox:focus::before {
  background-color: var(--gray-color-3);
}
.mx-checkbox-text {
  margin-left: var(--checkbox-text-mask-spacing);
}
.mx-checkbox-mask {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  width: var(--checkbox-mask-height);
  height: var(--checkbox-mask-height);
  border-radius: var(--checkbox-mask-border-radius);
  border: var(--checkbox-mask-border-width) solid var(--checkbox-mask-color-border);
  -webkit-user-select: none;
          user-select: none;
}
.mx-checkbox-mask::before {
  content: '';
  display: block;
  width: var(--checkbox-mask-height);
  height: var(--checkbox-mask-height);
  border-radius: var(--checkbox-mask-border-radius);
  opacity: 0;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) scale(0.8);
  position: absolute;
  transition: all 0.1s linear;
}
.mx-checkbox-mask::after {
  content: '';
  display: block;
  height: var(--checkbox-color-indeterminate-icon-height);
  width: var(--checkbox-color-indeterminate-icon-width);
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) scale(0);
  position: absolute;
  border-radius: 0.5px;
}
.mx-checkbox-mask-icon {
  position: relative;
  height: 100%;
  transform: scale(0.8);
  color: var(--checkbox-color-check-icon);
  transform-origin: center 50%;
  margin: 0 auto;
  display: block;
  width: var(--checkbox-size-check-icon);
  transition: transform 0.1s linear;
}
.mx-checkbox:hover .mx-checkbox-mask {
  border-color: var(--checkbox-mask-color-border_hover);
}
.mx-checkbox-checked .mx-checkbox-mask-icon {
  transform: scale(1);
  color: var(--checkbox-color-checked-icon);
}
.mx-checkbox-checked .mx-checkbox-mask::before {
  opacity: 1;
  transform: translateX(-50%) translateY(-50%) scale(1);
  border-color: var(--checkbox-mask-color-border_checked);
  background-color: var(--checkbox-mask-color-bg_checked);
}
.mx-checkbox-indeterminate .mx-checkbox-mask-icon {
  transform: scale(0);
}
.mx-checkbox-indeterminate .mx-checkbox-mask::before {
  opacity: 1;
  transform: translateX(-50%) translateY(-50%) scale(1);
  border-color: var(--checkbox-mask-color-border_checked);
  background-color: var(--checkbox-mask-color-bg_checked);
}
.mx-checkbox-indeterminate .mx-checkbox-mask::after {
  opacity: 1;
  background: var(--checkbox-indeterminate-color-bg);
  transform: translateX(-50%) translateY(-50%) scale(1);
  transition: transform 0.1s var(--transition-timing-function-overshoot);
}
.mx-checkbox.mx-checkbox-disabled {
  cursor: not-allowed;
}
.mx-checkbox.mx-checkbox-disabled:hover .mx-checkbox-mask {
  border-color: var(--checkbox-mask-color-border_disabled);
}
.mx-checkbox-checked:hover .mx-checkbox-mask {
  border-color: var(--checkbox-mask-color-border_checked);
}
.mx-checkbox-disabled .mx-checkbox-mask::before {
  opacity: 1;
  transform: translateX(-50%) translateY(-50%) scale(1);
  border-color: var(--checkbox-mask-color-bg_disabled);
  background-color: var(--checkbox-mask-color-bg_disabled);
}
.mx-checkbox-disabled.mx-checkbox-checked .mx-checkbox-mask::before {
  opacity: 1;
  transform: translateX(-50%) translateY(-50%) scale(1);
  border-color: var(--checkbox-mask-color-border_checked_disabled);
  background-color: var(--checkbox-mask-color-bg_checked_disabled);
}
.mx-checkbox-disabled.mx-checkbox-indeterminate .mx-checkbox-mask::before {
  opacity: 1;
  transform: translateX(-50%) translateY(-50%) scale(1);
  border-color: var(--checkbox-mask-color-border_checked_disabled);
  background-color: var(--checkbox-mask-color-bg_checked_disabled);
}
.mx-checkbox-disabled .mx-checkbox-text {
  color: var(--checkbox-color-text_disabled);
}
.mx-checkbox-group {
  display: flex;
}
.mx-checkbox-group .mx-checkbox {
  margin-right: var(--checkbox-group-spacing);
}
.mx-checkbox-group-direction-vertical {
  display: flex;
  flex-direction: column;
}
.mx-checkbox-group-direction-vertical .mx-checkbox {
  margin-bottom: var(--checkbox-group-spacing);
}