scinote-web/app/assets/stylesheets/shared_styles/elements/checkboxes.scss

// scss-lint:disable SelectorDepth QualifyingElement

:root {
  --sci-checkbox-size: 16px;
}

.sci-checkbox-container {
  display: inline-block;
  height: var(--sci-checkbox-size);
  position: relative;
  vertical-align: middle;
  width: var(--sci-checkbox-size);
}

input[type="checkbox"].sci-checkbox {
  cursor: pointer;
  flex-shrink: 0;
  height: var(--sci-checkbox-size);
  margin: 0;
  opacity: 0;
  position: relative;
  width: var(--sci-checkbox-size);
  z-index: 2;

  + .sci-checkbox-label {
    display: inline-block;
    flex-shrink: 0;
    height: var(--sci-checkbox-size);
    margin-left: calc(var(--sci-checkbox-size) * -1);
    position: absolute;
    right: 0;
    top: 0;
    width: var(--sci-checkbox-size);

    &::before {
      @include font-awesome;
      animation-timing-function: $timing-function-sharp;
      background: $color-white;
      border: 1px solid var(--sn-black);
      border-radius: 1px;
      color: $color-white;
      content: "";
      font-size: calc(var(--sci-checkbox-size) - var(--sci-checkbox-size) * .375);
      height: var(--sci-checkbox-size);
      left: 0;
      line-height: calc(var(--sci-checkbox-size) - 2px);
      position: absolute;
      text-align: center;
      transition: .2s;
      width: var(--sci-checkbox-size);
    }
  }

  &.hidden + .sci-checkbox-label {
    display: none;
  }

  &:checked + .sci-checkbox-label {
    &::before {
      background-color: var(--sn-science-blue);
      background-image: image-url("icon_small/sn-check.svg");
      background-position: center;
      border: 1px solid var(--sn-science-blue);

    }
  }

  &:indeterminate + .sci-checkbox-label {
    &::after {
      content: '';
      background: $color-volcano;
      height: calc(var(--sci-checkbox-size) - 6px);
      left: 3px;
      position: absolute;
      top: 3px;
      width: calc(var(--sci-checkbox-size) - 6px);
    }
  }

  &:focus {
    outline: none;
    outline-offset: 0;
  }

  &:disabled {
    cursor: default;

    + .sci-checkbox-label {
      &::before {
        border: $border-tertiary;
      }
    }

    &:checked + .sci-checkbox-label {
      &::before {
        background-color: var(--sn-sleepy-grey);
        border: 1px solid var(--sn-sleepy-grey);

      }
    }
  }
}