* {
  box-sizing: var(--air-box-sizing, border-box);
}

:host {
  display: var(--air-checkbox-host-display, block);
}

.checkbox {
  display: var(--air-checkbox-display, flex);
  align-items: var(--air-checkbox-align-items, center);
  position: relative;
  min-height: var(--air-checkbox-checkmark-height, 24px);
  padding-left: calc(var(--air-checkbox-checkmark-width, 24px) + var(--air-spacing-02, 0.5rem));
  margin-top: var(--air-checkbox-margin-top, 0);
  margin-right: var(--air-checkbox-margin-right, 0);
  margin-bottom: var(--air-checkbox-margin-bottom, var(--air-spacing-03, 1rem));
  margin-left: var(--air-checkbox-margin-left, 0);
  box-sizing: var(--air-checkbox-box-sizing, var(--air-box-sizing, border-box));
}
.checkbox:not(.disabled) {
  cursor: var(--air-checkbox-cursor, pointer);
}
.checkbox::before, .checkbox::after {
  position: absolute;
  content: "";
  box-sizing: var(--air-checkbox-box-sizing, var(--air-box-sizing, border-box));
}
.checkbox::before {
  width: var(--air-checkbox-checkmark-width, 24px);
  height: var(--air-checkbox-checkmark-height, 24px);
  top: var(--air-checkbox-checkmark-top, 0);
  left: var(--air-checkbox-checkmark-left, 0);
  border: var(--air-checkbox-checkmark-border, 1px solid var(--air-color-eclipse, #3a3a3a));
  border-radius: var(--air-checkbox-checkmark-border-radius, var(--air-form-element-border-radius, var(--air-border-radius, 4px)));
  background-color: var(--air-checkbox-checkmark-background-color, var(--air-color-white, #ffffff));
}
.checkbox::after {
  display: none;
  width: var(--air-checkbox-checkmark-tick-width, 11px);
  height: var(--air-checkbox-checkmark-tick-height, 6px);
  top: var(--air-checkbox-checkmark-tick-top, 7px);
  left: var(--air-checkbox-checkmark-tick-left, 6px);
  border-left: var(--air-checkbox-checkmark-tick-border-left, 2px solid var(--air-color-eclipse, #3a3a3a));
  border-bottom: var(--air-checkbox-checkmark-tick-border-bottom, 2px solid var(--air-color-eclipse, #3a3a3a));
  transform: var(--air-checkbox-checkmark-tick-transform, rotate(-45deg));
}
.checkbox[aria-checked]::after {
  display: block;
}
.checkbox:focus {
  outline: none;
}
.checkbox:focus:not(.disabled)::before {
  box-shadow: 0 0 0 var(--air-checkbox-checkmark-focus-width, var(--air-focus-outline-width, 2px)) var(--air-checkbox-checkmark-focus-color, var(--air-focus-outline-color, var(--air-color-primary-outline, var(--air-color-denim, #2e71bd))));
}
.checkbox:hover::before {
  background-color: var(--air-checkbox-checkmark-hover-background-color, var(--air-color-gainsboro, #d8d8d8));
}
.checkbox.disabled::before {
  border: var(--air-checkbox-checkmark-disabled-border, 1px solid var(--air-color-eclipse, #3a3a3a));
  background-color: var(--air-checkbox-checkmark-disabled-background-color, var(--air-color-gainsboro, #d8d8d8));
}
.checkbox .label {
  color: var(--air-checkbox-label-color, var(--air-body-color, var(--air-color-eclipse, #3a3a3a)));
  font-family: var(--air-checkbox-label-font-family, var(--air-body-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"));
  font-weight: var(--air-checkbox-label-font-weight, var(--air-body-font-weight, 400));
  font-size: var(--air-checkbox-label-font-size, var(--air-body-font-size, 1rem));
  line-height: var(--air-checkbox-label-line-height, var(--air-body-line-height, 1.5));
}
.checkbox .required-mark {
  color: var(--air-checkbox-mark-required-color, var(--air-color-error, var(--air-color-valencia, #e55451)));
}
.checkbox.status-error::before {
  border: var(--air-checkbox-checkmark-status-error-border, 1px solid var(--air-color-error, var(--air-color-valencia, #e55451)));
}
.checkbox.status-error .label {
  color: var(--air-checkbox-label-status-error-color, var(--air-color-error, var(--air-color-valencia, #e55451)));
}