.br-checkbox {
  --checkbox-background: var(--bg-color);
  --checkbox-color: var(--text-color);
  --checkbox-font-weight: var(--font-weight-medium);
  --checkbox-padding: var(--spacing-scale-base);
  --checkbox-size: 24px;
  display: block;
}
.br-checkbox label {
  color: var(--checkbox-color);
  cursor: pointer;
  display: inline-block;
  font-weight: var(--checkbox-font-weight);
  min-height: var(--checkbox-size);
  padding-left: calc(var(--checkbox-size) + var(--checkbox-padding));
  position: relative;
}
.br-checkbox label:empty {
  padding-left: var(--checkbox-size);
}
.br-checkbox.hidden-label label {
  padding-left: calc(var(--checkbox-size) + var(--surface-width-md) * 2);
  text-indent: -10000px;
  white-space: nowrap;
  width: 0;
}
.br-checkbox input {
  opacity: 0;
  position: absolute;
}
.br-checkbox input:focus:checked + label::before,
.br-checkbox input:focus + label::before, .br-checkbox input:focus-visible:checked + label::before,
.br-checkbox input:focus-visible + label::before, .br-checkbox input.focus-visible:checked + label::before,
.br-checkbox input.focus-visible + label::before {
  border-color: var(--focus-color) !important;
  box-shadow: 0 0 0 var(--surface-width-md) var(--focus-color);
  outline: none;
}
.br-checkbox input:hover:not(:disabled) + label::before {
  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));
}
.br-checkbox input:disabled + label {
  cursor: not-allowed;
  opacity: var(--disabled);
}
.br-checkbox input:disabled + label * {
  pointer-events: none;
}
.br-checkbox input:disabled + label:hover::before {
  background-image: none;
}
.br-checkbox input + label {
  align-items: flex-start;
  color: var(--color-secondary-07);
  cursor: pointer;
  display: inline-block;
  font-size: var(--font-size-scale-base);
  font-weight: var(--font-weight-medium);
  min-height: var(--spacing-scale-3x);
  position: relative;
}
.br-checkbox input + label::before {
  background: var(--color-secondary-01, #fff);
  border: 1px solid var(--color-secondary-04);
  border-radius: 4px;
  content: "";
  height: var(--checkbox-size);
  left: 0;
  position: absolute;
  width: var(--checkbox-size);
}
.br-checkbox input + label:empty {
  padding-left: var(--spacing-scale-3x);
}
.br-checkbox input:checked + label::after {
  border: solid var(--color-primary-lighten-01);
  border-width: 0 3px 3px 0;
  content: "";
  height: var(--icon-size-sm);
  left: 8px;
  position: absolute;
  top: 4px;
  transform: rotate(45deg);
  width: 8px;
}
.br-checkbox input:invalid + label::before {
  border-color: var(--color-danger, #e60000);
  border-width: 2px;
}
.br-checkbox input:disabled + label::before {
  box-shadow: none;
}
.br-checkbox.is-small input[type=checkbox] + label, .br-checkbox.small input[type=checkbox] + label, .br-checkbox[small] input[type=checkbox] + label {
  line-height: var(--spacing-scale-2xh);
  min-height: var(--spacing-scale-2xh);
}
.br-checkbox.is-small input[type=checkbox] + label::before, .br-checkbox.small input[type=checkbox] + label::before, .br-checkbox[small] input[type=checkbox] + label::before {
  height: var(--spacing-scale-2xh);
  width: var(--spacing-scale-2xh);
}
.br-checkbox.is-small input[type=checkbox]:checked + label::after, .br-checkbox.small input[type=checkbox]:checked + label::after, .br-checkbox[small] input[type=checkbox]:checked + label::after {
  border-width: 0 2px 2px 0;
  height: var(--icon-size-sm);
  left: 7px;
  top: 6px;
  width: 6px;
}
.br-checkbox.is-invalid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox] + label::before, .br-checkbox.invalid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox] + label::before, .br-checkbox[invalid]:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox] + label::before {
  border-color: var(--color-danger, #e60000);
  border-width: 2px;
}
.br-checkbox.is-invalid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:focus:checked + label::before,
.br-checkbox.is-invalid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:focus + label::before, .br-checkbox.invalid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:focus:checked + label::before,
.br-checkbox.invalid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:focus + label::before, .br-checkbox[invalid]:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:focus:checked + label::before,
.br-checkbox[invalid]:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:focus + label::before {
  border-color: var(--color-danger, #e60000);
}
.br-checkbox.is-invalid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:checked + label::before, .br-checkbox.invalid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:checked + label::before, .br-checkbox[invalid]:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:checked + label::before {
  border-color: var(--color-danger, #e60000);
}
.br-checkbox.is-valid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox] + label::before, .br-checkbox.valid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox] + label::before, .br-checkbox[valid]:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox] + label::before {
  border-color: var(--color-success, #168821);
  border-width: 2px;
}
.br-checkbox.is-valid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:focus:checked + label::before,
.br-checkbox.is-valid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:focus + label::before, .br-checkbox.valid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:focus:checked + label::before,
.br-checkbox.valid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:focus + label::before, .br-checkbox[valid]:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:focus:checked + label::before,
.br-checkbox[valid]:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:focus + label::before {
  border-color: var(--color-success, #168821);
}
.br-checkbox.is-valid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:checked + label::before, .br-checkbox.valid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:checked + label::before, .br-checkbox[valid]:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:checked + label::before {
  border-color: var(--color-success, #168821);
}

/*# sourceMappingURL=checkbox.css.map*/