#stageSortingContainer
  #stageSortable
    .sortable-item
      padding: 3px

      span
        color: #ffffff
        cursor: pointer

        &.active
          color: #46e7ff

    .sortable-handle
      cursor: move
      cursor: -webkit-grabbing
      width: 15px
      height: 15px
      margin: 0 5px
      filter: invert(100%)
      -webkit-filter: invert(100%)
      background-image: unquote("url(/packages/hangingprotocols/assets/dots.svg)")

    .sortable.target
      flex: 1 1 auto
      margin-left: 1em

    .sortable-ghost
      opacity: 0.6

    .deleteStage
      cursor: pointer
      color: white
      -webkit-transition: all 0.1s ease
      -moz-transition: all 0.1s ease
      transition: all 0.1s ease

      &:active, &:hover
        color: #48d3ff

  .addStage
    margin: 10px 0
    text-align: center

    #addStage
      cursor: pointer
      color: #ffffff
      -webkit-transition: all 0.1s ease
      -moz-transition: all 0.1s ease
      transition: all 0.1s ease

      &:active, &:hover
        color: #48d3ff

  .moveStageButtons
    margin: 10px 0
    text-align: center

    a
      cursor: pointer
      color: #ffffff
      text-decoration: none
      -webkit-transition: all 0.1s ease
      -moz-transition: all 0.1s ease
      transition: all 0.1s ease

      &:active, &:hover
        color: #48d3ff

      &[disabled="true"]
        opacity: 0.7
        cursor: disabled
        pointer-events: none
