@import "./properties.css";
@import "../checkbox-radio/index.css";

.input {
  border-radius: var(--checkbox-input-border-radius);
}

.input:before {
  border-color: var(--checkbox-check-border-color);
  border-style: var(--checkbox-check-border-style);
  border-width: var(--checkbox-check-border-width);
  content: "";
  height: var(--checkbox-check-height);
  left: var(--checkbox-check-spacing);
  opacity: 0;
  position: absolute;
  top: var(--checkbox-check-spacing);
  transform: rotate(var(--checkbox-check-rotation));
  transition: opacity var(--checkbox-radio-transition-speed);
  width: var(--checkbox-check-width);
}

/* checked */

.label input:checked + .input:before {
  opacity: 1;
}

/* error */

.error .input:before {
  border-color: var(--checkbox-radio-color-error);
}

/* disabled */

.disabled .input:before {
  border-color: var(--checkbox-radio-pseudo-element-color-disabled);
}