@import 'public-booking/main_dependencies';

@mixin bb-checkbox() {
  display: block;

  // Customize container.
  position: relative;
  cursor: pointer;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  label {
    display: flex;
    margin-bottom: 0;
    padding-left: 0;
    cursor: pointer;
  }

  // Hide the browser's default checkbox.
  input {
    margin: 0;
    opacity: 0;
    align-self: center;
    cursor: pointer;
  }

  // Add border radius.
  .bb-checkbox__check-mark {
    position: relative;
    left: -13px;
    border: 1px $gray-light solid;
    border-radius: 2px;
    align-self: center;
    background-color: white;
  }

  // On mouse-over add a grey background color.
  &:hover input ~ .bb-checkbox__check-mark {
    background-color: #ccc;
  }

  // On checkbox focus add a grey background color.
  input:focus ~ .bb-checkbox__check-mark {
    background-color: #ccc;
  }

  // When the checkbox is checked, add a blue background.
  input:checked ~ .bb-checkbox__check-mark {
    border-color: lighten($brand-primary, 10%);
    background-color: lighten($brand-primary, 10%);
  }

  // For checked box which is focused at the same time.
  input:focus:checked ~ .bb-checkbox__check-mark {
    border-color: $brand-primary;
    background-color: $brand-primary;
  }

  //Style the check mark/indicator.
  .bb-checkbox__check-mark:after {
    content: "";
    position: relative;
    display: none;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  // Show the check mark when checked.
  input:checked ~ .bb-checkbox__check-mark:after {
    display: block;
  }

  ng-transclude {
    position: relative;
    left: -5px;
  }

}