@mixin check-box {
  -webkit-appearance: none;
  background-color: #fafafa;
  border: 1px solid #cacece;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
  padding: 8px;
  border-radius: 3px;
  display: inline-block;
  position: relative;

  &:active, &:checked:active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
  }
   
  &:checked {
    background-color: white;
    border: 1px solid #adb8c0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
    color: $text;
  }
  
  &:checked:after {
    content: '\2714';
    font-size: 15px;
    position: absolute;
    top: -2px;
    left: 2px;
    color: $text;
  }
}