// Checkbox
// -------------------------------

.checkbox {
  position: relative;
  display: inline-block;
  padding: ($checkbox-height / 4) ($checkbox-width / 4);
  cursor: pointer;
}

.checkbox input {
  position: relative;
  width: $checkbox-width;
  height: $checkbox-height;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;

  &:before {
    /* what the checkbox looks like when its not checked */
    display: table;
    width: 100%;
    height: 100%;
    border: $checkbox-border-width solid $checkbox-off-border-color;
    border-radius: $checkbox-border-radius;
    background: $checkbox-off-bg-color;
    content: ' ';
    transition: background-color .1s ease-in-out;
  }
}

/* the checkmark within the box */
.checkbox input:after {
  position: absolute;
  top: 34%;
  left: 26%;
  display: table;
  width: $checkbox-width / 2;
  height: ($checkbox-width / 3) + 1;
  border: $checkbox-check-width solid $checkbox-check-color;
  border-top: 0;
  border-right: 0;
  content: ' ';
  opacity: 0;
  transition: opacity .05s ease-in-out;

  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* what the background looks like when its checked */
.checkbox input:checked:before {
  border: 0;
  background: $checkbox-on-bg-color;
}

/* what the checkmark looks like when its checked */
.checkbox input:checked:after {
  opacity: 1;
}

/* make sure item content have enough padding on left to fit the checkbox */
.item-checkbox .item-content {
  padding-left: ($item-padding * 2) + $checkbox-width;
}

/* position the checkbox to the left within an item */
.item-checkbox .checkbox {
  position: absolute;
  top: 0;
  left: $item-padding / 2;
  z-index: 3;
  display: flex;
  height: 100%;
  align-items: center;
}