scinote-web/app/assets/stylesheets/shared/checkbox.scss

// scss-lint:disable SelectorDepth SelectorFormat QualifyingElement
// scss-lint:disable NestingDepth ImportantRule

@import "constants";
@import "mixins";

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

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

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

    &::before {
      content: "\f0c8";
      font-family: "Font Awesome 5 Free";
      font-size: var(--checkbox-size);
      font-weight: 400;
      left: 0;
      line-height: var(--checkbox-size);
      position: absolute;
      text-align: center;
      top: 1px;
      width: var(--checkbox-size);
    }
  }

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

  &:checked + .checkbox-label {
    &::before {
      content: "\f14a";
    }
  }
}

input[type="checkbox"].trigger-checkbox {
  cursor: pointer;
  flex-shrink: 0;
  height: 16px;
  margin: 0;
  opacity: 0;
  position: relative;
  width: 24px;
  z-index: 2;

  + .checkbox-label {
    background: $color-silver-chalice;
    border-radius: 8px;
    display: inline-block;
    flex-shrink: 0;
    height: 16px;
    margin-left: -24px;
    position: relative;
    transition: .2s;
    width: 24px;

    &::before {
      background: $color-white;
      border-radius: 7px;
      content: "";
      height: 12px;
      left: 0;
      margin: 2px;
      position: absolute;
      transition: .2s;
      width: 12px;
    }
  }

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

  &:checked + .checkbox-label {
    background: $brand-success;

    &::before {
      left: 8px;
    }
  }
}