/* Checkbox and radio Styling */
input[type="radio"],
input[type="checkbox"] {
  all: unset;
  appearance: none;
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  width: 2.5rem;
  height: 1.5rem;
  position: relative;
  overflow: hidden;
  clip-path: circle(1.5rem at 50% 50%);
  border-radius: 0.75rem;
  min-width: 40px;
  box-sizing: border-box;
  transition: background 0.3s ease, border 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

input[type="radio"]::before,
input[type="checkbox"]::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  transition: transform 0.3s ease-in-out, background 0.3s ease, border 0.3s ease, color 0.3s ease, opacity 0.3s ease;
  transform: translateX(-16px);
}

input[type="radio"]:checked::before,
input[type="checkbox"]:checked::before {
  transform: translateX(16px);
}

input[type="radio"]:disabled,
input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: none;
}

input[type="radio"],
input[type="checkbox"] {
  background: var(--solo-checkbox-bg);
}

input[type="radio"]::before,
input[type="checkbox"]::before {
  background: var(--solo-checkbox-check-circle);
}

input[type="radio"]:checked,
input[type="checkbox"]:checked {
  background: var(--solo-checkbox-checked-bg);
}

input[type="radio"]:disabled,
input[type="checkbox"]:disabled {
  background: var(--solo-checkbox-disabled-bg);
}

input[type="radio"]:disabled::before,
input[type="checkbox"]:disabled::before {
  background: var(--solo-checkbox-disabled-circle);
}

input[type="radio"]:checked::before,
input[type="checkbox"]:checked::before {
  background: var(--solo-checkbox-checked-circle);
}
