.nest-checkbox {
  user-select: none;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  padding: var(--nest-checkbox-bleed, 2px);
}

.nest-checkbox-inner {
  --checkbox-bd-color: var(--nest-checkbox-bd-color, rgba(0, 0, 0, 0.17));
  --checkbox-bg-color: var(--nest-checkbox-bg-color, #ffffff);
  --checkbox-color: var(--nest-checkbox-color, #ffffff);
  display: block;
  border-style: solid;
  border-color: var(--checkbox-bd-color);
  background-color: var(--checkbox-bg-color);
  color: var(--checkbox-color);
  transition-property: border-color, background-color, color, opacity;
  transition: 0.2s cubic-bezier(0.2, 0.64, 0.21, 1);
  width: var(--nest-checkbox-size, 20px);
  height: var(--nest-checkbox-size, 20px);
  border-radius: var(--nest-checkbox-rad, 4px);
  border-width: var(--nest-checkbox-bd-w, 1.5px);
}

.nest-checkbox-icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  scale: 0;
  transition: scale 0.2s cubic-bezier(0.2, 0.64, 0.21, 1);
}

.nest-checkbox-input {
  cursor: pointer;
  z-index: 1;
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
}

.nest-checkbox-input:checked + .nest-checkbox-inner {
  --checkbox-bd-color: var(--nest-checkbox-bd-color-checked, #000000);
  --checkbox-bg-color: var(--nest-checkbox-bg-color-checked, #000000);
}

.nest-checkbox-input:checked + .nest-checkbox-inner .nest-checkbox-icon {
  scale: 1;
}

@media (hover: hover) and (pointer: fine) {
  .nest-checkbox-input:hover + .nest-checkbox-inner {
    border-color: var(--nest-checkbox-bd-color-hover, var(--checkbox-bd-color));
    background-color: var(--nest-checkbox-bg-color-hover, var(--checkbox-bg-color));
    color: var(--nest-checkbox-color-hover, var(--checkbox-color));
  }
  .nest-checkbox-input:checked:hover + .nest-checkbox-inner {
    border-color: var(--nest-checkbox-bd-color-checked-hover, var(--checkbox-bd-color));
    background-color: var(--nest-checkbox-bg-color-checked-hover, var(--checkbox-bg-color));
  }
}

.nest-checkbox-input:disabled {
  cursor: not-allowed;
}

.nest-checkbox-input:disabled + .nest-checkbox-inner {
  border-color: var(--nest-checkbox-bd-color-disabled, rgba(0, 0, 0, 0.05));
  background-color: var(--nest-checkbox-bg-color-disabled, rgba(0, 0, 0, 0.05));
  color: var(--nest-checkbox-color-disabled, var(--checkbox-color));
  opacity: var(--nest-checkbox-opacity-disabled, 1);
}

.nest-checkbox-input:checked:disabled + .nest-checkbox-inner {
  border-color: var(--nest-checkbox-bd-color-checked-disabled, var(--checkbox-bd-color));
  background: var(--nest-checkbox-bg-color-checked-disabled, var(--checkbox-bg-color));
  opacity: var(--nest-checkbox-opacity-checked-disabled, 0.34);
}