.storyline {
  .handle {
    fill: #ccc;
  }

  text {
    fill: #444;
    font: $font;
    font-size: 12px;
    font-weight: bold;
    pointer-events: none;
    padding-top: 3px;
    padding-left: 5px;
  }

  .border {
    fill: #ddd;
  }

  &.main {
    > .handle {
      fill: #444;
    }

    > text {
      fill: #fff;
    }
  }
}

&.editor_mode .storyline {
  &.hover {
    .handle {
      fill: $highlight-color;
    }
  }
}

&.editor_mode .storyline {
  .handle {
    cursor: pointer;
  }
}

&.editor_mode .storyline.selected,
&.selection_mode .storyline.highlighted {
  > .handle {
    fill: #5AA5F9;
    cursor: move;
  }

  > text {
    fill: #fff;
  }

  > .border {
    fill: #D2E5FA;
  }
}