/*
 * component checkbox
 */
/*
 * HTML template example:
 * <input type="checkbox" class="checkbox" id="c1">
 * <label for="c1">click here</label>
 */

/*
 * checkbox variables (you can change them)
 */

$checkbox-color: $white;
$checkbox-background: $color-alpha;
$checkbox-size: 2rem;
$checkbox-border-radius: 4px;

/*
 * checkbox styles
 */

.checkbox {
  border-radius: $checkbox-border-radius;
}

.checkbox {
  -webkit-appearance: none;
  appearance: none;
  width: $checkbox-size;
  height: $checkbox-size;
  vertical-align: text-bottom;
  outline: 0;
  box-shadow: inset 0 0 0 1px $color-alpha;
  background-color: $checkbox-color;
  transition: background-color 0.15s;
  cursor: pointer;
}

.checkbox + label {
  cursor: pointer;
}

.checkbox:disabled {
  opacity: 0.6;
}

.checkbox:disabled + label {
  opacity: 0.6;
  cursor: not-allowed;
}

.checkbox:checked {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=");
  background-size: 60% 60%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: $checkbox-background;
}