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


.checkbox {
  display: block;
  cursor: pointer;
  @include user-select(none);
}

.checkbox-on {
  display: none;
}

.checkbox-off {
  display: block;
}

.checkbox[aria-checked=true] {

  .checkbox-on {
    display: block;
  }

  .checkbox-off {
    display: none;
  }

}

.checkbox[aria-disabled=true] {
  opacity: 0.5;
  color: gray;

  .media-checkbox {
    color: inherit;
  }
}