.step-list {
  $in-between-steps-height: 2.2rem;
  $in-between-steps-vpadding: 0.4rem; // included in $in-between-steps-height

  flex: 0 0 auto; // auto-width: width of contents (including scrollbar)
  padding-top: 1.5rem;
  background-color: $WF-background;
  overflow-y: scroll;
  position: relative;
  scroll-behavior: smooth;

  .in-between-steps {
    position: relative;
    margin: 0;
    height: $in-between-steps-height;
    padding: $in-between-steps-vpadding 0;
  }

  .caught-error {
    // when a module does not load
    text-align: center;
    color: $error-prompt;
    @include content-1;
    padding: 1rem;
    background-color: white;
  }

  // Big button to call the module search at the bottom of stack
  .module-search-last {
    @include add-module-button-container;
    position: relative; // XXX should probably be margin-top: 1.5rem, but that's hard to fix now because the "ADD STEP" modal would shift by 1.5rem
    top: 1.5rem;
    padding-bottom: 20rem; // so there's always a scrollbar, and clicking "ADD STEP" doesn't add one

    & > button {
      &:not(:hover):not(.active):not(.lesson-highlight) {
        // Color this one differently from all other buttons on the site
        background: transparent;
      }
    }
  }

  .empty-read-only {
    // "This Tab has no Steps.", sorta in the middle of the pane where modules normally go
    width: $module-width;
    margin: 0 $module-margin-right 0 $module-margin-left;
    text-align: center;
    @include content-1;
    margin-top: 45%;
  }

  // Button to call the module search between modules
  .module-search-in-between {
    width: $module-width;
    margin-left: $module-margin-left;
    position: relative;

    &:hover,
    &:focus-within {
      z-index: 2; // appear above the next module
    }

    button.search {
      display: block;
      position: absolute;
      width: $module-width;
      height: $in-between-steps-height - 2 * $in-between-steps-vpadding;
      cursor: pointer;
      border: 0;
      opacity: 0;
      background: lighten($brand-orange, 8%);
      color: white;
      font-size: 1rem;
      border-radius: 1rem;
      transition-property: opacity;
      transition-delay: 0.06s; // [adamhooper, 2019-03-28] why? Seems Workbench would feel snappier without transition here -- So that it does not flash when you hover past it. [PFC 2019-03-31]

      i.icon-add {
        position: relative;
        top: 0rem;
      }

      span {
        display: none; // no text
      }

      &:hover,
      &.active {
        opacity: 1;
      }

      &.lesson-highlight {
        opacity: 1;
      }
    }
  }

  // Drop zone to place a step between others in the stack
  .step-drop-spot {
    display: block;
    position: absolute;
    top: -5rem + $in-between-steps-vpadding;
    bottom: -5rem;
    left: 0;
    right: 0;
    z-index: 2;

    .highlight {
      opacity: 0;
      pointer-events: none;
      margin: 5rem $module-margin-right 0 $module-margin-left;
      border-radius: 1rem;
      height: $in-between-steps-height - 2 * $in-between-steps-vpadding;
      background-color: $brand-background--action;
      color: darken($brand-workspace, 5%);
      text-align: center;

      i {
        font-size: 1rem;
        vertical-align: -0.1rem;
      }
    }

    &.is-drag-hovering .highlight {
      opacity: 1;
    }
  }

  &.zen-mode {
    .step:not(.zen-mode),
    .in-between-steps {
      display: none;
    }

    .step.zen-mode {
      .module-card {
        width: 50rem;
      }

      &::after {
        display: none; // nix the little line after each module
      }

      // No need to collapse the epxanded python module - this is solo module display
      .context-collapse-button {
        display: none;
      }

      .module-card-header {
        height: 5.5rem;
        padding-top: 1rem;
      }

      // Notes are the same width as step-list

      textarea[name='notes'],
      .editable-notes-read-only {
        width: 50rem;
      }
    }
  }
}
