@import '../../../Variables';

.coveo-checkbox-button {
  position: relative;

  width: $checkbox-size;
  height: $checkbox-size;
  padding: 0;

  background: $pure-white;
  border: 1px solid $color-light-contrast-grey;
  border-radius: $border-radius;
  outline: none;

  transition: all 200ms;

  cursor: pointer;
}

input[type='checkbox'].coveo-checkbox {
  display: none;

  & + button {
    @extend .coveo-checkbox-button;

    &:after {
      position: absolute;
      top: 7px;
      left: 7px;

      display: inline-block;
      width: 0;
      height: 0;

      content: '';

      background-color: transparent;
      border-radius: 100%;

      transition: all 300ms ease;
    }

    &:focus:after {
      top: -6px;
      left: -6px;

      display: inline-block;
      width: 26px;
      height: 26px;

      background-color: rgba(0, 0, 0, 0.08);
    }
  }

  &:checked + button {
    &:before {
      position: absolute;
      top: 1px;
      left: 5px;

      box-sizing: content-box;
      display: block;
      width: 4px;
      height: 9px;

      content: '';

      border: solid $coveo-blue;
      border-width: 0 2px 2px 0;
      transform: rotate(43deg);
    }
  }

  &:indeterminate + button {
    position: relative;

    &:before {
      position: absolute;
      top: 6px;
      left: 3px;

      box-sizing: content-box;
      display: block;
      width: 8px;
      height: 0;

      content: '';

      border-bottom: solid 2px $medium-blue;
    }
  }

  &:indeterminate:disabled + button:before {
    border-color: $pure-white;
  }

  &:disabled + button {
    background-color: $dark-grey;
    border-color: $dark-grey;

    cursor: default;
    opacity: 0.2;
  }
}

.coveo-checkbox-label {
  align-items: center;

  display: inline-flex;

  color: $dark-grey;
  line-height: 16px;
  vertical-align: middle; // Required to properly position checkboxes into tables

  .label {
    cursor: pointer;
  }

  &.disabled .label {
    cursor: default;
    opacity: 0.4;
  }

  button + .label,
  .label + .coveo-checkbox + button {
    margin-left: $checkbox-label-margin;
  }
}

label[for].coveo-checkbox-label {
  cursor: pointer;
}

.coveo-checkbox-labels-group {
  .coveo-checkbox-label {
    display: flex;

    // Deprecated, use the coveo-checkbox-group-option class instead.
    & + .coveo-checkbox-label {
      margin-top: $checkbox-label-margin-top;
    }
  }

  .coveo-checkbox-group-option + .coveo-checkbox-group-option {
    margin-top: $checkbox-label-margin-top;
  }
}
