$checkbox--size: 14px;
$checkbox--dot-size: 6px;
$checkbox--h-padding: $ix-marg-c;

.fancy-checkbox {
  color: $g11-sidewalk;
  font-size: 12px;
  font-weight: 600;
  position: relative;
  padding-left: $checkbox--size + $ix-marg-b;
  position: relative;
  cursor: pointer;

  input {
    position: absolute;
    left: -9999px;
  }

  &:before,
  &:after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: background-color 0.25s ease;
  }

  &:before {
    left: $checkbox--size / 2;
    z-index: 2;
    width: $checkbox--size;
    height: $checkbox--size;
    background-color: $g2-kevlar;
    border-radius: 3px;
  }

  &:after {
    left: $checkbox--size / 2;
    z-index: 3;
    width: $checkbox--dot-size;
    height: $checkbox--dot-size;
    background-color: $c-hydrogen;
    transition: opacity 0.25s ease, transform 0.25s ease;
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.8,1.8);
  }

  &.checked {
    &:before {
      background-color: $c-sapphire;
    }
    &:after {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1,1);
    }
  }
}
