// vf-form__checkbox

@import 'package.variables.scss';
// Debug information from component's `package.json`:
// ---
/*!
 * Component: #{map-get($componentInfo, 'name')}
 * Version: #{map-get($componentInfo, 'version')}
 * Location: #{map-get($componentInfo, 'location')}
 */

// Because we want the checkbox to be used in various context. We need the context to define
// Any layout things, and colours like below
.vf-form__item--checkbox {
  .vf-form__checkbox {
    + .vf-form__label::before {
      // border-color: set-ui-color(vf-ui-color--grey--light);
      margin-right: 8px;
    }
  }

  .vf-form__helper {
    margin-left: 29px; // just because
  }
}

.vf-form__checkbox {
  opacity: 0; // hide it
  position: absolute; // take it out of document flow

  + .vf-form__label {
    color: color(grey--dark);
    cursor: pointer;
    padding: 0;
    position: relative;
  }

  // Box.
  + .vf-form__label::before {
    background-color: ui-color(white);
    border: 2px solid color(grey);
    content: '';
    display: inline-block;
    height: 1rem;
    min-width: 1rem;;
    position: relative;
    top: 4px; // need to look at a better way to do this that keeps the semantics of a label
    width: 1rem;
  }

  // Box hover
  &:hover + .vf-form__label:before,
  &:focus + .vf-form__label:before {
    border-color: color(grey--dark);
    box-shadow: 0 0 0 .125rem color(grey--dark);
  }

  // Box checked
  &:checked + .vf-form__label::before {
    background-color: color(blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cpath d='M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z' fill='%23fff'/%3E%3C/svg%3E");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: .75em;
    border-color: color(blue);
  }

  &:checked:hover + .vf-form__label::before,
  &:checked:focus + .vf-form__label::before {
    box-shadow: 0 0 0 .125rem color(grey--dark)
  }

  // Disabled state .vf-form__label.
  &:disabled + .vf-form__label {
    color: color(grey);
    cursor: not-allowed;

  }

  // Disabled box.
  &:disabled + .vf-form__label::before {
    background-color: color(grey--lightest);
    border-color: color(grey);
    box-shadow: none;
  }
  // Checkmark. Could be replaced with an image
}
.vf-form__checkbox--invalid + .vf-form__label::before {
  border-color: color(red);
}