//
// Checkbox
// -------------------------

.input-checkbox {
  &:active {
    background-color: @accent-color;
  }
  &:before,
  &:after {
    background-color: @accent-text-color;
  }
  &:checked {
    background-color: @accent-color;
  }

  &:indeterminate {
    background-color: @accent-color;
  }
}


//
// Radio
// -------------------------

.input-radio {
  &:before {
    background-color: @accent-text-color;
  }
  &:active {
    background-color: @accent-color;
  }
  &:checked {
    background-color: @accent-color;
  }
}


//
// Range (Slider)
// -------------------------

.input-range {
  &::-webkit-slider-thumb {
    background-color: @accent-color;
  }
}


//
// Toggle
// -------------------------

.input-toggle {
  &:checked {
    background-color: @accent-color;
  }
  &:before {
    background-color: @accent-text-color;
  }
}



// States -------------------------

.input-checkbox,
.input-text,
.input-search,
.input-number,
.input-textarea,
.input-select,
.input-color {
  &:focus {
    .focus();
  }
}

.input-text,
.input-search,
.input-number,
.input-textarea {
  &:invalid {
    .invalid();
  }
}