///////////////////////////////////////////
// !THEME / COMPONENTS / FORMS - CHECKBOXES
///////////////////////////////////////////


// Custom styled checkbox https://scottaohara.github.io/a11y_styled_form_controls/src/checkbox/
.unl .dcf-input-checkbox {
  @include mb-2;
  padding-left: #{ms(5)}em;
  position: relative;


  input[type="checkbox"] {
    cursor: pointer;
    height: #{ms(3)}em;
    left: 0;
    margin: 0;
    opacity: 0; // Hide the actual checkbox
    position: absolute;
    top: 0;
    width: #{ms(5)}em; // Width should equal .dcf-input-checkbox padding-left for consistent hover across input and label
    z-index: 1;
  }


  label {
    cursor: pointer;
    touch-action: manipulation;
  }


  // Create checkbox and checkmark
  label::before,
  label::after {
    content: '';
    left: 0;
    position: absolute;
    top: 0;
  }

  // Style checkbox
  label::before {
    @include bg-white;
    border: 1px solid $color-border-input;
    @include h-6;
    @include w-6;
  }

  // Style checkmark
  label::after {
    background: transparent;
    border-color: $darker-gray;
    border-style: solid;
    border-top-color: transparent;
    border-width: 0 0 #{ms(-10)}em #{ms(-10)}em;
    @include h-2;
    opacity: 0;
    transform: rotate(-45deg) translate(-#{ms(-16)}em,#{ms(-4)}em) scale(.5);
    transition: opacity .05s ease-out, transform .05s ease-out;
    width: #{ms(1)}em;
  }


  // Show checkmark
  input[type="checkbox"]:checked + label::after {
    opacity: 1;
    transform: rotate(-45deg) translate(-#{ms(-16)}em,#{ms(-4)}em) scale(1);
  }


  // Hover and focus
  input:hover + label::before,
  label:hover::before,
  input[type="checkbox"]:focus + label::before {
    box-shadow: 0 0 $length-em-3 fade-out($color-border-input-hover,.25);
  }

}