input {
  border: 1px solid var(--bg-secondary-alt);
  caret-color: var(--heading);
}

input:hover {
  border: 1px solid var(--bg-tertiary);
}

input:focus {
  border: 1px solid var(--primary);
}

input:disabled {
  color: var(--muted);
  cursor: not-allowed;
}

/* native toggle */
input[type=checkbox] {
  transform: scale(.75);
  margin-left: -10px;
}

input[type="checkbox"] {
  position: relative;
  width: 80px;
  height: 40px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--danger);
  outline: none;
  border-radius: 2rem;
  cursor: pointer;
  box-shadow: inset 0 0 5px rgb(0 0 0 / 50%);
}

input[type="checkbox"]::before {
  content: "";
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.5s;
}

input[type="checkbox"]:checked::before {
  transform: translateX(100%);
  background: #fff;
}

input[type="checkbox"]:checked {
  background: var(--success);
}