philomena/assets/css/elements/checkbox.css

input[type="checkbox"].checkbox {
  appearance: none;
}

.checkbox {
  display: inline-block;
  align-self: center;
  width: var(--checkbox-width);
  height: var(--checkbox-height);
  background: var(--danger-color);
  border: var(--checkbox-border-width) solid var(--danger-border-color);
  border-radius: var(--border-radius-checkbox);
  transition:
    background var(--transition-long-animation-duration) ease,
    border-color var(--transition-long-animation-duration) ease;
}

.checkbox:after {
  content: "";
  font-family: var(--fa-style-family, "Font Awesome 6 Free");
  font-weight: var(--fa-style, 900);
  text-align: center;
  line-height: calc(var(--checkbox-height) - var(--checkbox-border-width) * 2);
  display: block;
  position: relative;
  background: var(--text-color);
  width: calc(var(--checkbox-height) - var(--checkbox-border-width) * 2);
  height: calc(var(--checkbox-height) - var(--checkbox-border-width) * 2);
  border-radius: 100%;
  left: 0;
  transition: left var(--transition-long-animation-duration) ease;
}

.checkbox:checked {
  background: var(--success-color);
  border-color: var(--success-border-color);
  transition:
    background var(--transition-long-animation-duration) ease,
    border-color var(--transition-long-animation-duration) ease;
}

.checkbox:checked:after {
  content: "";
  left: calc(var(--checkbox-width) - var(--checkbox-height));
  transition: left var(--transition-long-animation-duration) ease;
}