.form-item.checkbox-wrapper {
  margin-bottom: $spacing-xs;
}

// Spacing above collection of checkboxes
.form-item.checkbox-wrapper:first-of-type {
  margin-top: $spacing-2xs;
}

// Remove spacing above collection of checkboxes if label is present
.label + .form-item.checkbox-wrapper {
  margin-top: 0;
}

// Spacing below collection of checkboxes
.form-item.checkbox-wrapper:last-of-type {
  margin-bottom: $spacing-2xs;
}

// Visually, we'll hide the checkbox input and create our own styled version
// to match the specs.
.checkbox {
  @include hidden;
}

// The label corresponds to the content inside of the `label` tag. Since we're
// creating our own checkbox style, we'll need to position this in order to
// accomodate the spacing needed for the checkbox.
.checkbox-label {
  line-height: 1.5rem;
  position: relative;
  display: flex;
  cursor: pointer;
  padding-left: 26px; //width of checkbox 16px + 10px of padding
  min-height: 24px;
  user-select: none;
  font-size: $radio-checkbox-font-size;
  font-weight: $radio-checkbox-font-weight;
}

// Spacing for presentational checkbox
.checkbox-label::before {
  box-sizing: border-box;
  content: '';

  // According to the spec, we'll want the bounding box for our checkbox to
  // be 16px. The border size will be what will be updated during the
  // different checkbox states.
  width: 16px;
  height: 16px;
  margin: 2px;

  // We need to position the pseudo-element absolutely in the space that we've
  // created with the padding from the label itself. We position only with
  // `top` since we don't want the checkbox to be centered vertically with the
  // text overflows.
  position: absolute;
  left: 0;
  top: 2px;

  // Checkboxes with a background color look visually off against a parent container.
  background-color: transparent;
  border: 1px solid $light-gray-1;
  border-radius: $border-radius;
}

// Create the appearance of the check in the `after` pseudo-element
.checkbox-label::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 9px;
  width: 8px;
  height: 4px;
  background: none;
  border-left: 2px solid $white;
  border-bottom: 2px solid $white;
  transform: scale(0) rotate(-45deg);
  transform-origin: bottom right;
  margin-top: -$spacing-2xs;
}

//----------------------------------------------
// Checked
// ---------------------------------------------

// Update properties for checked checkbox
.checkbox:checked + .checkbox-label::before,
.checkbox:indeterminate + .checkbox-label::before,
.checkbox-label[data-contained-checkbox-state='true']::before,
.checkbox-label[data-contained-checkbox-state='mixed']::before {
  background-color: $primary;
  border-color: $primary;
  border-width: 1px;
}

// Display the check
.checkbox:checked + .checkbox-label::after,
.checkbox-label[data-contained-checkbox-state='true']::after {
  transform: scale(1) rotate(-45deg);
}

// Indeterminate symbol
.checkbox:indeterminate + .checkbox-label::after,
.checkbox-label[data-contained-checkbox-state='mixed']::after {
  transform: scale(1) rotate(0deg);
  border-left: 0 solid $white;
  border-bottom: 2px solid $white;
  width: 8px;
  top: 12px;
}

//----------------------------------------------
// Focus
// ---------------------------------------------

// Unchecked
.checkbox:focus + .checkbox-label::before,
.checkbox-label__focus::before,
// Checked
.checkbox:checked:focus + .checkbox-label::before,
.checkbox-label[data-contained-checkbox-state='true'].checkbox-label__focus::before,
// Indeterminate
.checkbox:indeterminate:focus + .checkbox-label::before,
.checkbox-label[data-contained-checkbox-state='mixed'].checkbox-label__focus::before {
  // We can't use outline here because of the rounded corners so have to increase the width/height to fake an outline.
  border-color: rgba($primary,.25);
  border-width: 3px;
  width: 20px;
  height: 20px;
  left: -2px;
  top: 0;
}

//----------------------------------------------
// Disabled
// ---------------------------------------------

// Workaround for: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11295231
[disabled] ~ _ {
  font-size: inherit;
}

.checkbox:disabled + .checkbox-label,
.checkbox-label[data-contained-checkbox-disabled='true'] {
  cursor: not-allowed;
  color: $light-gray-1;
}

.checkbox:disabled + .checkbox-label::after {
  border-color: $dark-gray-3;
}

.checkbox:disabled + .checkbox-label::before,
.checkbox-label[data-contained-checkbox-disabled='true']::before {
  border-color: $light-gray-1;
}

.checkbox:checked:disabled + .checkbox-label::before,
.checkbox:indeterminate:disabled
  + .checkbox-label::before,
.checkbox-label[data-contained-checkbox-state='true'][data-contained-checkbox-disabled='true']::before,
.checkbox-label[data-contained-checkbox-state='mixed'][data-contained-checkbox-disabled='true']::before {
  background-color: $light-gray-2;
}