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

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

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

input[type='checkbox']: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 {
  background-color: rgb(var(--color-smoke-70));
  --tw-ring-color: rgb(var(--color-smoke-60));
}