scinote-web/app/assets/stylesheets/steps/components/checklist.scss

// scss-lint:disable SelectorDepth
// scss-lint:disable NestingDepth

.step-checklist-items {
  .sci-inline-edit {
    margin-top: 2px;

    .sci-inline-edit__content {
      padding-bottom: 7px;
      padding-top: 7px;
    }
  }

  .step-checklist-item {
    padding-left: 5px;
  }

  .step-element-header {
    .step-element-name {
      align-items: flex-start;
      column-gap: .5em;
      display: grid;
      font-weight: normal;
      grid-template-columns: max-content auto;

      .step-checklist-text {
        width: 100%;
      }

      &.done .step-checklist-text {
        text-decoration: line-through;
      }

      &:hover.done .step-checklist-text {
        text-decoration: none;
      }
    }
  }

  .sci-checkbox-view-mode {
    align-self: center;
    background-color: $color-black;
    border-radius: 50%;
    height: 4px;
    margin-right: .5em;
    width: 4px;
  }

  .step-checklist-add-item {
    margin-left: 12px;

    .fas {
      margin-right: .5em;
    }
  }

  .step-checklist-item-ghost {
    border: 1px solid $brand-primary;
  }

  .sci-checkbox-container {
    margin: 12px 0;

    &.disabled {
      pointer-events: none;
    }
  }
}

.step-checklist-container {
  .empty-checklist-element {
    color: $color-silver-chalice;
    margin-left: 3em;
  }
}