/*** FANCY LABELS USING CHECKBOXES & RADIO BUTTONS ***/

.fancy-labels {

  label {
    @include border-2($ff-color-label-border);
    background-color: $ff-color-label-bg;
    cursor: pointer;
    padding: 0.5em;
    text-align: center;
    margin-bottom: 0.2em; //provides a gap between options on smaller screens
    transition: all 0.2s ease-in-out;
  }

  input[type="radio"],
  input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    &:not(:disabled):hover + label {
      @include border-2($ff-color-label-hover);
      color: $ff-color-label-text-hover;
      transition: all 0.2s ease-in-out;
    }
    &:not(:disabled):focus + label {
      @include focus-box-shadow-input($ff-color-label-focused)
    }
    &:checked + label,
    &:not(:disabled):active + label {
      background-color: $ff-color-label-checked;
      @include border-2($ff-color-label-checked);
      color: $ff-color-label-text-checked;
      transition: all 0.2s ease-in-out;
    }
  }

  //DISABLED
  input[type="radio"]:disabled + label,
  input[type="checkbox"]:disabled + label{
    opacity: 0.8;
    cursor: not-allowed;
  }

}

/*** FANCY LABELS USING CHECKBOXES & RADIO BUTTONS ***/