.checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  gap: 0.5rem;
}

.checkbox__input {
  display: none;
}

.checkbox__box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 0.25rem;
  flex-shrink: 0;

  background: linear-gradient(
    to bottom,
    light-dark(white, var(--color-gray-800)) 0%,
    light-dark(#f8f9fa, var(--color-gray-900)) 100%
  );

  border: 1px solid light-dark(var(--color-gray-300), var(--color-gray-600));

  box-shadow: 0 1px 2px -1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)),
    0 0 0 1px light-dark(rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.1)) inset;
}

.checkbox__checkmark {
  width: 1.125rem;
  height: 1.125rem;
  color: light-dark(var(--color-gray-900), var(--color-gray-100));
  opacity: 0;
  pointer-events: none;
}

.checkbox__input:checked + .checkbox__box {
  background: linear-gradient(
    to bottom,
    light-dark(var(--color-blue-500), var(--color-blue-400)) 0%,
    light-dark(var(--color-blue-600), var(--color-blue-500)) 100%
  );
  border-color: light-dark(var(--color-blue-500), var(--color-blue-400));

  box-shadow: 0 2px 4px -1px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4)),
    0 0 0 1px light-dark(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1))
      inset;
}

.checkbox__input:checked + .checkbox__box .checkbox__checkmark {
  opacity: 1;
  color: light-dark(var(--color-white), var(--color-zinc-800));
}

.checkbox:hover .checkbox__box {
  border-color: light-dark(var(--color-gray-400), var(--color-gray-500));
  background: linear-gradient(
    to bottom,
    light-dark(#fafafa, var(--color-gray-700)) 0%,
    light-dark(#f0f0f0, var(--color-gray-800)) 100%
  );

  box-shadow: 0 2px 4px -1px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.35)),
    0 0 0 1px light-dark(rgba(255, 255, 255, 0.9), rgba(0, 0, 0, 0.15)) inset;
}

.checkbox:hover .checkbox__input:checked + .checkbox__box {
  background: linear-gradient(
    to bottom,
    light-dark(var(--color-blue-600), var(--color-blue-300)) 0%,
    light-dark(var(--color-blue-700), var(--color-blue-400)) 100%
  );
  border-color: light-dark(var(--color-blue-600), var(--color-blue-300));

  box-shadow: 0 3px 6px -1px light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.45)),
    0 0 0 1px light-dark(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.15))
      inset;
}

.checkbox__input:focus-visible + .checkbox__box {
  outline: none;
  box-shadow: 0 0 0 3px
      light-dark(rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.3)),
    0 1px 2px -1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
}

.checkbox:has(.checkbox__input:disabled) {
  cursor: not-allowed;
}

.checkbox__input:disabled + .checkbox__box {
  opacity: 0.65;
  background: linear-gradient(
    to bottom,
    light-dark(var(--color-gray-200), var(--color-gray-600)) 0%,
    light-dark(var(--color-gray-400), var(--color-gray-700)) 100%
  );
  border-color: light-dark(var(--color-gray-400), var(--color-gray-500));
  box-shadow: inset 0 1px 0 0
      light-dark(rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.1)),
    inset 0 2px 2px 0 light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)),
    0 0 0 1px light-dark(rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.1)) inset;
}

.checkbox__input:checked:disabled + .checkbox__box {
  background: linear-gradient(
    to bottom,
    light-dark(var(--color-gray-300), var(--color-gray-500)) 0%,
    light-dark(var(--color-gray-400), var(--color-gray-600)) 100%
  );
  border-color: light-dark(var(--color-gray-400), var(--color-gray-500));
  box-shadow: inset 0 1px 0 0
      light-dark(rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.1)),
    inset 0 2px 2px 0 light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.3)),
    0 0 0 1px light-dark(rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.1)) inset;
}

.checkbox__input:checked:disabled + .checkbox__box .checkbox__checkmark {
  color: light-dark(var(--color-gray-500), var(--color-gray-400));
  opacity: 0.8;
}

.checkbox__input:disabled + .checkbox__box:hover,
.checkbox__input:disabled + .checkbox__box:focus-visible {
  background: linear-gradient(
    to bottom,
    light-dark(var(--color-gray-200), var(--color-gray-600)) 0%,
    light-dark(var(--color-gray-400), var(--color-gray-700)) 100%
  ) !important;
  border-color: light-dark(
    var(--color-gray-400),
    var(--color-gray-500)
  ) !important;
  box-shadow: inset 0 1px 0 0
      light-dark(rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.1)),
    inset 0 2px 2px 0 light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)),
    0 0 0 1px light-dark(rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.1)) inset !important;
}

.checkbox__input:checked:disabled + .checkbox__box:hover,
.checkbox__input:checked:disabled + .checkbox__box:focus-visible {
  background: linear-gradient(
    to bottom,
    light-dark(var(--color-gray-300), var(--color-gray-500)) 0%,
    light-dark(var(--color-gray-400), var(--color-gray-600)) 100%
  ) !important;
  border-color: light-dark(
    var(--color-gray-400),
    var(--color-gray-500)
  ) !important;
  box-shadow: inset 0 1px 0 0
      light-dark(rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.1)),
    inset 0 2px 2px 0 light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.3)),
    0 0 0 1px light-dark(rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.1)) inset !important;
}