$input-height: rem-calc(28px);
$checkbox-size: ru(1);
$gap: ru(.5);

.checkbox {
  display: flex;
  align-content: center;
  position: relative;
  margin: 0;
  min-height: $checkbox-size;
  padding-left: $checkbox-size + $gap;
  user-select: none;

  + .checkbox {
    margin-top: ru(.75);
  }

  &:before {
    content: '';
    position: absolute;
    top: ($input-height - $checkbox-size) / 2;
    left: 0;
    width: $checkbox-size;
    height: $checkbox-size;
    border: 1px solid color('neutral-3');
    background-color: color('primary-2');
    overflow: hidden;
    border-radius: 2px;
  }
}

.checkbox-input {
  position: absolute;
  top: 0;
  left: 0;
  width: $checkbox-size + $gap;
  height: $input-height;
  opacity: 0;
  margin: 0;
  cursor: pointer;

  &:checked {
    + .checkbox-label:after { opacity: 1; }
  }

  &:disabled {
    + .checkbox-label {
      cursor: not-allowed;
      color: color('neutral-3');
    }

    + .checkbox-label:after {
      box-shadow: 3px 3px 0 0 color('neutral-3');
    }
  }
}

.checkbox-label {
  cursor: pointer;
}

.checkbox-label:after {
  $width: $checkbox-size / 3;
  $height: $checkbox-size / 2;

  position: absolute;
  width: $width;
  height: $height;
  top: $width / 2 + ($input-height - $checkbox-size) / 2;
  left: $height / 2;
  margin-left: rem-calc(1px);

  transform: rotate(45deg);
  transform-origin: right;
  box-shadow: 3px 3px 0 0 color('primary-1');
  border-radius: 20%;

  opacity: 0;
  content: '';
}

@media #{$tablet} {
  .checkbox {
    line-height: ru(.75);
    margin: 0;
  }
}