@appearhere/bloom/components/Form/Checkbox/Checkbox.css

Appear Here's pattern library and styleguide

.root {
  position: relative;
  display: inline-block;
}

.root * {
  box-sizing: border-box;
}

.root input {
  position: absolute;
  opacity: 0;
  width: 1em;
  height: 1em;
  margin: 0;
}

.checkbox {
  display: inline-block;
}

.labelContainer {
  vertical-align: bottom;
}

.label {
  composes: fontRegular from '../../../globals/typography.css';
  color: currentColor;
  margin-left: var(--size-regular);
  display: block;
}

.root input:focus + label .checkbox {
  outline-color: var(--color-focusRing);
  outline-style: auto;
  outline-width: 5px;
}

.root input + label .checkbox {
  border: 2px solid var(--color-greyLighter);
  border-radius: 4px;
  line-height: 0;
  display: inline-block;
  transition: background-color 200ms, border-color 200ms;
  transition-timing-function: cubic-bezier(0,1,.75,1);
  color: var(--color-white);
}

.icon {
  line-height: 0;
  display: inline-block;
  transform: scale(0.6) rotate(-30deg) translateZ(0);
  opacity: 0;
  transition: transform 200ms, opacity 200ms;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.icon svg {
  line-height: 0;
  vertical-align: middle;
  height: 1em;
  width: 1em;
}

.root input + label:hover .icon {
  border-color: var(--color-greyLight);
  color: var(--color-greyLight);
  opacity: 0.2;
}

.root input:checked + label  .checkbox {
  background-color: var(--color-greyDark);
  border-color: var(--color-greyDark);
}

.root input:checked + label .icon {
  transform: scale(1) rotate(0deg) translateZ(0);
  opacity: 1;
}