///////////////////////////////////////////////////
// THEME / COMPONENTS / FORMS - CHECKBOXES & RADIOS
///////////////////////////////////////////////////


// Custom styled checkboxes https://scottaohara.github.io/a11y_styled_form_controls/src/checkbox/
// and radio buttons https://scottaohara.github.io/a11y_styled_form_controls/src/radio-button/


// Style checkbox and radio input
.unl .dcf-input-checkbox label::before,
.unl .dcf-input-radio label::before {
  transition: border-color $transition-duration-hover-off $transition-timing-fn-hover-off, box-shadow $transition-duration-hover-off $transition-timing-fn-hover-off;
}


.unl .dcf-input-switch label {
  transition: background-color $transition-duration-hover-off $transition-timing-fn-hover-off, border-color $transition-duration-hover-off $transition-timing-fn-hover-off, color $transition-duration-hover-off $transition-timing-fn-hover-off;
}


// Hover
.unl .dcf-input-checkbox label:hover::before,
.unl .dcf-input-radio label:hover::before,
.unl .dcf-input-checkbox input[type="checkbox"]:hover + label::before {
  transition: border-color $transition-duration-hover-on $transition-timing-fn-hover-on;
}


.unl .dcf-input-switch label {
  transition: background-color $transition-duration-hover-on $transition-timing-fn-hover-on, border-color $transition-duration-hover-on $transition-timing-fn-hover-on, color $transition-duration-hover-on $transition-timing-fn-hover-on;
}


.dcf-input-switch input[type="radio"]:checked + label:hover {
  background-color: $bg-color-button-primary-hover;
  border-color: $border-color-button-primary-hover;
}


.dcf-input-switch input[type="radio"]:not(:checked):not(:disabled) + label:hover {
  background-color: $bg-color-button-secondary-tertiary-hover;
  color: $color-button-secondary-tertiary-hover;
}


// Focus
.unl .dcf-input-checkbox input[type="checkbox"]:focus + label::before,
.unl .dcf-input-radio input[type="radio"]:focus + label::before {
  border-color: $border-color-input-focus;
  box-shadow: 0 0 0 3px $bg-color-body, 0 0 0 5px $border-color-input-focus;
  transition: box-shadow $transition-duration-hover-on $transition-timing-fn-hover-on;
}


.unl .dcf-input-checkbox input[type="checkbox"]:focus + label::after {
  border-left-color: $border-color-input-focus;
  border-bottom-color: $border-color-input-focus;
  border-right-color: $border-color-input-focus;
}


.unl .dcf-input-radio input[type="radio"]:focus + label::after {
  background-color: $border-color-input-focus; // Match focused input border-color
}


// Disabled
.unl .dcf-input-checkbox input[type="checkbox"]:disabled + label::before,
.unl .dcf-input-radio input[type="radio"]:disabled + label::before {
  background-color: $bg-color-input-disabled;
}