input[type='checkbox'],
input[type='radio'] {
  cursor: pointer;
  color: rgb(var(--color-ocean-30));
}

input[type='checkbox']:checked,
input[type='radio']:checked {
  --tw-ring-color: rgb(var(--color-ocean-30));
}

input[type='checkbox']:not(:checked),
input[type='radio']:not(:checked) {
  background-color: transparent;
}

input[type='checkbox']:focus,
input[type='radio']:focus {
  --tw-ring-color: rgb(var(--color-ocean-70));
}

input[type='checkbox']:disabled,
input[type='radio']:disabled {
  color: rgb(var(--color-smoke-50));
  border-color: rgb(var(--color-smoke-70));
  background-color: rgb(var(--color-smoke-70));
}

input[type='checkbox']:checked:disabled,
input[type='radio']:checked:disabled {
  background-color: rgb(var(--color-smoke-70));
  --tw-ring-color: rgb(var(--color-smoke-60));
}