.x-checkbox {
  appearance: none;
  vertical-align: text-bottom;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  border-radius: var(--checkbox-border-radius);
  cursor: var(--cursor-checkbox);
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  transition: background-color 80ms, box-shadow 80ms;
  display: inline-block;
  position: relative;
}

.x-checkbox:where([data-disabled], :disabled) {
  cursor: var(--cursor-disabled);
}

.x-checkbox:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.x-checkbox:where(:checked):before {
  content: "✓";
  font-family: var(--default-font-family);
  font-size: var(--checkbox-indicator-size);
  color: currentColor;
  font-weight: 700;
  line-height: 1;
}

.x-checkbox:where(:indeterminate):before {
  content: "";
  width: calc(var(--checkbox-indicator-size) * .7);
  height: max(1.5px, calc(var(--checkbox-indicator-size) * .15));
  background-color: currentColor;
  border-radius: 1px;
}

.x-checkbox:where(:focus-visible) {
  outline: 2px solid var(--focus-8);
  outline-offset: 2px;
}

.x-checkbox:where([data-size="1"]) {
  --checkbox-size: calc(var(--space-4) * .875);
  --checkbox-indicator-size: calc(9px * var(--scaling));
  --checkbox-border-radius: calc(var(--radius-1) * .875);
}

.x-checkbox:where([data-size="2"]) {
  --checkbox-size: var(--space-4);
  --checkbox-indicator-size: calc(10px * var(--scaling));
  --checkbox-border-radius: var(--radius-1);
}

.x-checkbox:where([data-size="3"]) {
  --checkbox-size: calc(var(--space-4) * 1.25);
  --checkbox-indicator-size: calc(12px * var(--scaling));
  --checkbox-border-radius: calc(var(--radius-1) * 1.25);
}

.x-checkbox:where(:not([data-size])) {
  --checkbox-size: var(--space-4);
  --checkbox-indicator-size: calc(10px * var(--scaling));
  --checkbox-border-radius: var(--radius-1);
}

.x-checkbox:where(:not([data-variant="soft"])) {
  background-color: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--neutral-a7);
}

.x-checkbox:where(:not([data-variant="soft"])):where(:checked, :indeterminate) {
  background-color: var(--accent-9);
  color: var(--accent-contrast);
  box-shadow: none;
}

.x-checkbox:where(:not([data-variant="soft"])):where([data-high-contrast]):where(:checked, :indeterminate) {
  background-color: var(--accent-12);
  color: var(--neutral-1);
}

.x-checkbox:where(:not([data-variant="soft"])):where([data-disabled], :disabled) {
  box-shadow: inset 0 0 0 1px var(--neutral-a6);
  color: var(--neutral-a8);
  background-color: #0000;
}

.x-checkbox:where([data-variant="soft"]) {
  background-color: var(--accent-a5);
  color: var(--accent-a11);
}

.x-checkbox:where([data-variant="soft"]):where([data-high-contrast]):where(:checked, :indeterminate) {
  color: var(--accent-12);
}

.x-checkbox:where([data-variant="soft"]):where([data-disabled], :disabled) {
  background-color: var(--neutral-a3);
  color: var(--neutral-a8);
}