/* src/checkbox/src/Checkbox.css */
.o-ui {
  --o-ui-checkbox-indeterminate-stroke-width: 5px;
}
.o-ui-checkbox {
  --_checkbox-size: 1.5rem;
  outline: transparent;
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-start;
  cursor: pointer;
  color: var(--hop-neutral-text);
  line-height: var(--hop-body-sm-line-height);
  max-width: 100%;
  width: max-content;
  height: max-content;
  position: relative;
  transition: var(--o-ui-focus-ring-transition);
}
.o-ui-checkbox-box {
  --_checkbox-border-radius: var(--hop-shape-rounded-sm);
  --_checkbox-border-color: var(--hop-neutral-border);
  --_checkbox-background-color: var(--hop-neutral-surface);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--_checkbox-size);
  height: var(--_checkbox-size);
  border: 1px solid var(--_checkbox-border-color);
  background-color: var(--_checkbox-background-color);
  border-radius: var(--_checkbox-border-radius);
  transition: all var(--o-ui-easing-duration-2) var(--o-ui-easing-productive);
  flex-shrink: 0;
}
.o-ui-checkbox-box:before {
  opacity: 0;
  content: "";
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  display: block;
  position: absolute;
  box-shadow: 0 0 0 0.125rem var(--hop-neutral-surface), 0 0 0 0.25rem var(--hop-primary-border-focus);
  border-radius: var(--_checkbox-border-radius);
  transition: var(--o-ui-focus-ring-transition);
}
.o-ui-checkbox:not(.o-ui-checkbox-checked):not(.o-ui-checkbox-indeterminate) input[type=checkbox]:focus-visible + .o-ui-checkbox-box {
  background-color: var(--hop-neutral-surface-hover);
}
.o-ui-checkbox:not(.o-ui-checkbox-checked):not(.o-ui-checkbox-indeterminate):not(.o-ui-checkbox-invalid) .o-ui-checkbox-box:before {
  background-color: var(--hop-neutral-surface-hover);
  border: 1px solid var(--hop-neutral-border-hover);
}
.o-ui-checkbox-checkmark {
  opacity: 0;
}
.o-ui-checkbox-checked .o-ui-checkbox-box .o-ui-checkbox-checkmark {
  color: var(--hop-neutral-icon-selected);
  opacity: 1;
}
.o-ui-checkbox-checked.o-ui-checkbox-disabled .o-ui-checkbox-box .o-ui-checkbox-checkmark {
  color: var(--hop-neutral-icon-disabled);
}
.o-ui-checkbox-indeterminate .o-ui-checkbox-box {
  --_checkbox-border-color: var(--hop-neutral-border-selected);
  --_checkbox-background-color: var(--hop-neutral-surface-selected);
}
.o-ui-checkbox-indeterminate .o-ui-checkbox-box:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.75rem;
  height: 0.09375rem;
  transform: translate(-50%, -50%);
  background-color: var(--hop-neutral-icon-selected);
}
.o-ui-checkbox-invalid.o-ui-checkbox-indeterminate .o-ui-checkbox-box {
  --_checkbox-border-color: var(--hop-danger-border-strong);
  --_checkbox-background-color: var(--hop-danger-surface-strong);
}
.o-ui-checkbox-label {
  margin-left: var(--hop-space-inline-sm);
}
.o-ui-checkbox-counter,
.o-ui-checkbox-label {
  margin-top: calc((var(--_checkbox-size) - (var(--hop-body-md-line-height) * var(--hop-body-md-font-size))) / 2);
}
.o-ui-checkbox-reverse .o-ui-checkbox-label {
  margin-right: var(--hop-space-inline-sm);
  margin-left: 0;
}
.o-ui-checkbox-icon {
  margin-left: var(--hop-space-inline-xs);
}
.o-ui-checkbox-reverse .o-ui-checkbox-icon {
  margin-left: 0;
  margin-right: var(--hop-space-inline-xs);
}
.o-ui-checkbox-reverse {
  flex-direction: row-reverse;
}
.o-ui-checkbox-invalid {
  color: var(--hop-danger-text-weak);
}
.o-ui-checkbox-invalid .o-ui-checkbox-box {
  --_checkbox-border-color: var(--hop-danger-border-strong);
}
.o-ui-checkbox-invalid:hover .o-ui-checkbox-box {
  --_checkbox-background-color: var(--hop-neutral-surface-hover);
}
.o-ui-checkbox-checked.o-ui-checkbox-invalid .o-ui-checkbox-box {
  --_checkbox-border-color: var(--hop-danger-border-strong);
  --_checkbox-background-color: var(--hop-danger-surface-strong);
}
.o-ui-checkbox.o-ui-checkbox-invalid:hover .o-ui-checkbox-box {
  --_checkbox-border-color: var(--hop-danger-border-strong);
}
.o-ui-checkbox-checked .o-ui-checkbox-box {
  --_checkbox-border-color: var(--hop-neutral-border-selected);
  --_checkbox-background-color: var(--hop-neutral-surface-selected);
}
.o-ui-checkbox-checked .o-ui-checkbox-box:before {
  transform: scale(1);
}
.o-ui-checkbox-disabled,
.o-ui-checkbox[disabled] {
  color: var(--hop-neutral-text-disabled);
  cursor: not-allowed;
}
.o-ui-checkbox-disabled .o-ui-checkbox-box,
.o-ui-checkbox[disabled] .o-ui-checkbox-box,
.o-ui-checkbox-disabled.o-ui-checkbox-checked .o-ui-checkbox-box,
.o-ui-checkbox[disabled].o-ui-checkbox-checked .o-ui-checkbox-box {
  --_checkbox-border-color: var(--hop-neutral-border-disabled);
  --_checkbox-background-color: var(--hop-neutral-surface-disabled);
}
.o-ui-checkbox input[type=checkbox]:not([disabled]):focus-visible + .o-ui-checkbox-box::before,
.o-ui-checkbox:not(.o-ui-checkbox-disabled).o-ui-checkbox-focus .o-ui-checkbox-box::before {
  opacity: 1;
}
.o-ui-checkbox:not(.o-ui-checkbox-checked) input[type=checkbox]:active:not([disabled]) + .o-ui-checkbox-box,
.o-ui-checkbox:not(.o-ui-checkbox-checked).o-ui-checkbox-active input[type=checkbox]:not([disabled]) + .o-ui-checkbox-box {
  --_checkbox-border-color: var(--hop-neutral-border-hover);
  --_checkbox-background-color: var(--hop-neutral-surface-hover);
}
.o-ui-checkbox:hover:not(.o-ui-checkbox-checked):not(.o-ui-checkbox-indeterminate):not(.o-ui-checkbox-invalid) > input[type=checkbox]:not([disabled]) + .o-ui-checkbox-box,
.o-ui-checkbox-hover:not(.o-ui-checkbox-checked):not(.o-ui-checkbox-disabled) .o-ui-checkbox-box {
  --_checkbox-border-color: var(--hop-neutral-border-hover);
  --_checkbox-background-color: var(--hop-neutral-surface-hover);
}
.o-ui-checkbox-checked:hover input[type=checkbox]:not([disabled]):focus-visible + .o-ui-checkbox-box:before,
.o-ui-checkbox-checked.o-ui-checkbox-hover input[type=checkbox]:not([disabled]):focus-visible + .o-ui-checkbox-box:before,
.o-ui-checkbox-checked:not(.o-ui-checkbox-disabled).o-ui-checkbox-focus:hover .o-ui-checkbox-box:before,
.o-ui-checkbox-checked:not(.o-ui-checkbox-disabled).o-ui-checkbox-focus.o-ui-checkbox-hover .o-ui-checkbox-box:before {
  --_checkbox-border-color: var(--hop-neutral-border-selected);
}
.o-ui-checkbox-sm {
  --_checkbox-size: 1rem;
}
.o-ui-checkbox-sm .o-ui-checkbox-box:before {
  width: var(--_checkbox-size);
  height: var(--_checkbox-size);
}
.o-ui-checkbox-sm .o-ui-checkbox-label,
.o-ui-checkbox-sm .o-ui-checkbox-counter {
  margin-top: calc((var(--_checkbox-size) - (var(--hop-body-sm-line-height) * var(--hop-body-sm-font-size))) / 2);
}
.o-ui-checkbox.o-ui-checkbox-sm .o-ui-checkbox-box .o-ui-checkbox-checkmark {
  width: var(--_checkbox-size);
  height: var(--_checkbox-size);
}
.o-ui-checkbox-in-field {
  margin-top: var(--hop-space-stack-xs);
  margin-bottom: var(--hop-space-stack-xs);
}