.CheckboxWrapper {
  display: flex;
  align-items: center;
}

.Input {
  opacity: 0;
}

.Label {
  display: flex;
  font-size: var(--input-font-size);
  cursor: pointer;
  color: var(--label-color);
}
.Label.Checked {
  color: var(--input-color);
}

.Disabled .Label {
  color: var(--label-color-disabled);
  cursor: auto;
}

.LabelBefore {
  flex: 0 0 12px;
  height: 12px;
  width: 12px;
  position: relative;
  top: 2px;
  right: 10px;
}

.LabelText {
  flex: 1 0 0;
}

.Input:focus + label .LabelBefore {
  border-color: var(--input-focus-border-color);
  box-shadow: var(--input-focus-shadow);
  outline: none;
}

.UncheckedIcon {
  fill: var(--icon-neutral-color);
}

.CheckedIcon :global .cls-1 {
  fill: var(--primary-color);
}

.CheckedIcon :global .cls-2 {
  fill: white;
}

.Disabled .CheckedIcon :global .cls-1 {
  fill: var(--icon-neutral-color);
}

.Disabled .UncheckedIcon,
.Disabled .CheckedIcon {
  cursor: not-allowed;
}

.NoLabel {
  position: relative;
}

.NoLabel svg {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -6px;
  margin-top: -6px;
}