/**
 * Custom Checkbox Styling
 *
 * @package  generator-mh-boilerplate
 * @author   Martin Herweg <info@martinherweg.de>
 */

/*
|--------------------------------------------------------------------------
| _components.checkbox.scss
|--------------------------------------------------------------------------
*/

.c-checkbox {
  position: absolute;
  left: -9999px;

  + span {
    position: relative;

    margin: 0 30px 0 0;
    padding: 0 0 0 26px;

    cursor: pointer;

    &::before {
      position: absolute;
      top: 0;
      left: 0;

      width: 16px;
      height: 16px;

      content: '';

      background: color('white');
    }
  }

  &:checked + span {
    &::before {
      background: color('black-10');
      box-shadow: inset 0 0 0 4px c('white');
    }
  }
}