///////////////////////////////////////////////////
// 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/


@use "../variables/" as var;


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


.unl .dcf-input-switch label {
  transition: background-color var.$transition-duration-hover-off var.$transition-timing-fn-hover-off, border-color var.$transition-duration-hover-off var.$transition-timing-fn-hover-off, color var.$transition-duration-hover-off var.$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 var.$transition-duration-hover-on var.$transition-timing-fn-hover-on;
}


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


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


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


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


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


.unl .dcf-input-radio input[type="radio"]:focus-visible + label::after {
  background-color: var.$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: var.$bg-color-input-disabled;
}