.ui-checkbox {
  --ui-checkbox-size: 18px;
  --ui-checkbox-radius: 6px;
  --ui-checkbox-bg: #fff;
  --ui-checkbox-border: #545a6c;
  --ui-checkbox-border-hover: #2287ed;
  --ui-checkbox-fill: linear-gradient(180deg, #38b2f1 0%, #064ee8 100%);
  --ui-checkbox-fill-border: #2287ed;
  --ui-checkbox-check: #fff;
  --ui-checkbox-check-thickness: 2px;
  --ui-checkbox-focus-ring: rgba(34, 135, 237, 0.35);
}

.ui-checkbox--light {
  --ui-checkbox-bg: #fff;
  --ui-checkbox-border: #545a6c;
}

.ui-checkbox--dark {
  --ui-checkbox-bg: #000;
  --ui-checkbox-border: #545a6c;
}

input[type="checkbox"].ui-checkbox {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: var(--ui-checkbox-size);
  height: var(--ui-checkbox-size);
  margin: 0;
  flex: 0 0 auto;
  position: relative;
  border: 1px solid var(--ui-checkbox-border);
  border-radius: var(--ui-checkbox-radius);
  background: var(--ui-checkbox-bg);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

input[type="checkbox"].ui-checkbox:hover {
  border-color: var(--ui-checkbox-border-hover);
}

input[type="checkbox"].ui-checkbox:checked {
  background: var(--ui-checkbox-fill);
  border-color: var(--ui-checkbox-fill-border);
}

input[type="checkbox"].ui-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--ui-checkbox-size) * 0.23);
  height: calc(var(--ui-checkbox-size) * 0.45);
  border: solid var(--ui-checkbox-check);
  border-width: 0 var(--ui-checkbox-check-thickness) var(--ui-checkbox-check-thickness) 0;
  transform: translate(-50%, -58%) rotate(45deg);
}

input[type="checkbox"].ui-checkbox:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ui-checkbox-focus-ring);
}

input[type="checkbox"].ui-checkbox:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}