$white: #fff;
$base-font-sans-serif: "Avenir", "Helvetica Neue", "Helvetica", sans-serif;

:local {
  .checkbox {
    position: fixed;
    left: -9999px;
    top: -9999px;
    &:checked ~ {
      .fakeCheckbox {
        &:after {
          opacity: 1 !important;
        }
      }
    }
  }
  .fakeCheckbox {
    cursor: pointer;
    border-radius: 3px;
    border: 1px solid #b9c5cd;
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: top;
    position: relative;
    background: $white;
    font-size: 0;
    line-height: 0;
    &:after {
      position: absolute;
      left: 4px;
      top: 4px;
      content: '';
      border: 2px solid #2eae8f;
      border-top: none;
      border-right: none;
      width: 9px;
      height: 5px;
      opacity: 0;
      transform: rotate(-45deg);
      transition: all .2s ease-in-out;
    }
    &.small {
      width: 15px;
      height: 15px;
      &:after {
        left: 3px;
        width: 8px;
        height: 4px;
      }
    }
    &.grey {
      cursor: not-allowed;
      &:after {
        border: 2px solid #B9C5CD;
        border-top: none;
        border-right: none;
      }
    }
  }
  .labelText {
    cursor: pointer;
    display: inline-block;
    font: 500 16px/18px $base-font-sans-serif;
    color: #4a5b64;
    margin: 0 0 0 16px;
    vertical-align: top;
  }
}