Custom checkbox

//checkbox

input[type=checkbox] {
  position: absolute; // take it out of document flow
  opacity: 0; // hide it

  & + label {
    position: relative;
    cursor: pointer;
    padding: 0;
  }
  // Box.
  & + label:before {
    content: '';
    margin-right: 10px;
    display: inline-block;
    vertical-align: text-top;
    width: 18px;
    height: 18px;
    background: transparent;
    border: 1px solid $medium-gray;
    border-radius: 5px;
  }
  // Box hover
  &:hover + label:before {
    background: transparent;
  }

  &:checked:hover + label:before {
    background: transparent;
  }
  // Box checked
  &:checked + label:before {
    background: transparent;
  }
  // Disabled state label.
  &:disabled + label {
    color: $dark-gray;
    cursor: auto;
  }
  // Disabled box.
  &:disabled + label:before {
    box-shadow: none;
    background: $dark-gray;
  }
  // Checkmark. Could be replaced with an image
  &:checked + label:after {
    content: '';
    position: absolute;
    left: 4px;
    top: 9px;
    background: $primary-color;
    width: 2px;
    height: 2px;
    box-shadow: 2px 0 0 $primary-color, 4px 0 0 $primary-color, 4px -2px 0 $primary-color, 4px -4px 0 $primary-color, 4px -6px 0 $primary-color, 4px -8px 0 $primary-color;
    transform: rotate(45deg);
  }
}