.reporter {
  .commands-container {
    font-family: $monospace;
    min-width: $reporter-contents-min-width;
    padding: 0;

    &:empty {
      display: none;
    }
  }

  .command {
    cursor: default;
    margin: 0;
  }

  .command-scaled {
    font-size: 85%;
    line-height: 14px;
  }

  .command-is-studio {
    cursor: auto;

    &.command-type-parent .command-controls .studio-command-remove {
      display: block;
      padding-left: 5px;

      &:hover {
        color: #565554;
      }
    }

    .command-wrapper:hover {
      background-color: #eef1f4;
    }
  }

  .hook-studio {
    .command-wrapper:hover {
      background-color: #eef1f4;
    }

    .command-type-parent > span > .command-wrapper {
      &:hover {
        border-top: 1px solid #e3e3e3;
      }
    }

    .command-type-parent:first-child > span > .command-wrapper {
      border-top: 0;
    }
  }

  .command-type-system.command-is-event > span > .command-wrapper {
    user-select: none;
    font-style: unset;
    .command-method,
    .command-message {
      color: #525252;
      font-weight: 700;
    }
  }
  .command-is-event > span > .command-wrapper {
    font-style: italic;

    .command-method,
    .command-message {
      color: #9a9aaa;
    }
  }

  .command-type-parent > span > .command-wrapper {
    border-top: 1px solid #e3e3e3;

    &:hover {
      border-top: 1px solid #eef1f4;
    }
  }

  .command-type-parent:first-child > span > .command-wrapper {
    border-top: 0;
  }

  .command-type-child {
    .command-method {
      &:before {
        float: left;
        content: "-";
        margin-right: 2px;
        padding-left: 5px;
      }
    }
  }

  .command-type-system.command-is-event,
  .command-name-session {
    > span > .command-wrapper {
      .num-children {
        display: none;
      }
    }
  }

  .command-wrapper {
    background-color: #eef1f4;
    color: #777;
    min-height: 20px;

    &:hover {
      background-color: #e0e5e7;
    }

    .command-wrapper-text {
      display: flex;
      flex-wrap: wrap;
      padding: 2px 5px 0;

      .command-interceptions {
        font-style: normal;

        .status {
          font-weight: 600;
        }
      }

      .command-alias,
      .command-interceptions {
        border-radius: 10px;
        color: #777888;
        padding: 0 5px;
        display: inline-block;

        &.route {
          background-color: $yellow-medium;
        }

        &.dom {
          background-color: darken(#d4eaff, 3%);
        }

        &.agent,
        &.primitive {
          background-color: darken(#ffe0de, 3%);
        }

        &.show-count {
          padding-right: 2px;
          border-radius: 10px 0 0 10px;
          max-width: 200px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          vertical-align: top;
          height: 18px;
        }
      }

      // ensures alias & number of children commands don't break if reporter
      // width is narrow
      .alias-container {
        white-space: nowrap;

        > {
          display: inline-block;
        }
      }

      .num-children,
      .command-alias-count .command-interceptions-count {
        border-radius: 5px;
        color: #777;
        font-size: 90%;
        font-style: normal;
        line-height: 1;
        margin-left: 0;
      }

      .num-children.has-alias {
        border-radius: 10px;
        line-height: 1;
        padding: 3px 5px 3px 5px;
      }

      .command-interceptions-count {
        border-radius: 0 10px 10px 0;
        padding: 2px 5px;
      }

      .command-alias-count {
        border-radius: 0 10px 10px 0;
        padding: 2px 5px;
      }

      .num-children,
      .command-alias-count,
      .command-interceptions-count {
        background-color: darken(#ffdf9c, 8%) !important;
      }
    }

    .command-progress {
      height: 2px;
    }
  }
  .command-child-container {
    margin-left: 10px;
  }

  .command-number {
    flex-shrink: 0;
    color: #bcbccc;
    min-height: 1px; // because some numbers are empty
    padding-right: 10px;
    text-align: right;
    width: 25px;

    i {
      display: none;
    }
  }

  .command-state-pending > span > .command-wrapper .command-number {
    i {
      line-height: 18px;
      display: inline-block;
    }

    span {
      display: none;
    }
  }

  .command-method {
    padding: 1px 2px 0;
    display: inline-block;
    font-size: 11px;
    min-width: 80px;
    font-weight: 600;
    color: #565554;
  }

  .command-state-pending > span > .command-wrapper {
    border-left: 2px solid $pending;
    background-color: lighten($pending, 40%);
    cursor: default;

    &:hover {
      box-shadow: none;
    }

    .command-wrapper-text {
      padding-left: 3px;

      .command-number {
        margin-left: 5px;
        width: 20px;
      }

      .command-number,
      .command-method,
      .command-message,
      .command-pin {
        color: lighten($pending, 15%);
      }
    }

    .command-progress > span {
      animation-fill-mode: forwards;
      animation-iteration-count: 1;
      animation-name: progress-bar;
      animation-timing-function: linear;
      background: #7eb0db;
      display: block;
      float: right;
      height: 100%;
      width: 100%;
      transform-origin: right;

      @keyframes progress-bar {
        100% {
          transform: scaleX(0);
        }
      }
    }
  }

  .command-state-failed > span > .command-wrapper {
    border-left: 2px solid $fail;
    background-color: $err-header-background;

    &:hover {
      background: darken($err-header-background, 2%);
    }

    .command-wrapper-text {
      padding-left: 3px;

      .command-number,
      .command-method,
      .command-message,
      .command-pin {
        color: $err-header-text;
      }
    }
  }

  .command-message {
    flex-grow: 2;
    margin-left: 0;
    overflow: hidden;
    white-space: nowrap;

    > span {
      align-items: center;
      display: flex;
    }
  }

  .command-message-text {
    display: block;
    flex-grow: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .command-wrapper {
    .fa-circle {
      display: none;
    }
  }

  .command-state-warn > span > .command-wrapper {
    font-style: unset;
    background-color: $warn-background;
    border-left: 2px solid hsl(42, 56%, 53%);

    &:hover {
      background-color: $warn-header-background;
    }

    .command-wrapper-text .command-method {
      color: $warn-text;
    }
  }

  .command .runnable-err-wrapper {
    padding: 0;
    border: 0;
    margin: 0;
    margin-bottom: 5px;
  }

  .command-with-indicator {
    > span > .command-wrapper {
      .command-status {
        font-weight: 700;
        color: #565554;
        margin-right: 3px;
      }

      .command-body {
        color: #565554;
      }

      .fa-circle {
        padding: 4px;
        padding-right: 2px;
        display: inline-block;
      }

      .fa-circle.successful {
        color: $pending;
      }

      .fa-circle.aborted {
        color: $fail;
      }

      .fa-circle.bad {
        color: #f0ad4e;
      }

      .fa-circle.pending {
        color: #aaa;
      }
    }
  }

  .command-name-assert {
    .command-method {
      span {
        border-radius: 2px;
        padding: 0 3px;
        font-size: 11px;
        display: inline-block;
        line-height: 14px;
      }
    }

    .command-message {
      color: #565554;

      strong {
        font-weight: 600;
        margin: 0 3px;
      }
    }

    .command-message-text {
      white-space: normal;
    }

    &.command-state-pending {
      .command-method {
        span {
          background-color: $pending;
          color: white;
        }
      }
      .command-message {
        color: $pending;

        strong {
          color: darken($pending, 10%);
        }
      }
    }

    &.command-state-failed {
      .command-method {
        span {
          background-color: $fail;
          color: white;
        }
      }
      .command-message {
        color: $fail;

        strong {
          color: darken($fail, 10%);
        }
      }
    }

    &.command-state-passed {
      .command-method {
        color: $pass;

        span {
          background-color: $pass;
          color: white;
        }
      }
      .command-message {
        color: darken($pass, 3%);

        strong {
          color: darken($pass, 10%);
        }
      }
    }
  }

  .command-name-log,
  .command-name-get,
  .command-name-download {
    // we're wrapping the text, so override command-scaled
    font-size: 100%;
    line-height: 18px;

    .command-message-text {
      white-space: initial;
      word-wrap: break-word;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 50;
      -webkit-box-orient: vertical;
    }
  }

  .command-name-uncaught-exception {
    // need extra spacing between (uncaught exception) and the error message
    .command-message {
      margin-left: 5px;
    }
  }

  .command-controls {
    i {
      padding: 2px;
      color: #ababab;
    }

    .studio-command-remove {
      display: none;
    }

    .command-alias,
    .command-interceptions {
      font-family: $open-sans;
      font-size: 10px;
      line-height: 1.75;
      margin-left: 5px;
    }

    i:hover {
      cursor: pointer;
    }

    label {
      font-size: 85%;
    }
  }

  .command-invisible {
    display: none;
    margin-left: 5px;
    margin-right: 0;
  }

  .command-is-invisible .command-invisible {
    display: inline-block;
  }

  .command-error {
    font-style: normal;
  }

  .command-has-num-elements .num-elements,
  .num-children,
  .command-has-children.command-is-open
    > span
    > .command-wrapper
    .num-children.has-children {
    display: none;
  }

  .command-has-num-elements.no-elements .num-elements,
  .command-has-num-elements.multiple-elements .num-elements,
  .command-has-children .num-children.has-children {
    display: inline;
  }

  .command-has-children > span > .command-wrapper:hover {
    .command-expander {
      color: #999;
    }
  }

  .command-has-children.command-has-console-props
    > span
    > .command-wrapper:hover {
    .command-parent-print-btn {
      opacity: 1;
      pointer-events: unset;

      &:hover {
        box-shadow: 0 0 3px #33333370;
        background-color: #333333;
      }
    }
  }

  .command-has-children.command-has-console-props > span > .command-wrapper {
    position: relative;
    .command-parent-print-btn {
      opacity: 0;
      position: absolute;
      top: 0;
      right: 0;
      pointer-events: none;
      transition: all 50ms;
      background-color: #333333a0;
      padding: 2px 4px;
      color: white;
    }
  }

  .command-pin {
    color: #999;
    display: none;
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1;
    margin-right: 10px;
    outline: none;
    padding: 2px 0 0;
    text-align: right;
    width: 15px;

    i {
      margin-right: 0;
    }
  }

  .command-expander {
    color: #bcbccc;
    display: none;
    text-align: right;
    padding-right: 8px;
    width: 25px;

    i {
      @extend .#{$fa-css-prefix}-caret-right;
    }
  }

  .command-has-children > span > .command-wrapper {
    .command-expander {
      display: block;
    }
    .command-progress {
      visibility: hidden;
    }
  }

  .command-is-open > span > .command-wrapper {
    .command-expander {
      i {
        @extend .#{$fa-css-prefix}-caret-down;
      }
    }

    .command-alias {
      border-radius: 10px !important;
    }
  }

  .command-has-snapshot > span > .command-wrapper {
    cursor: pointer;
  }
  .command-has-console-props > span > .command-wrapper {
    cursor: pointer;
  }

  .command-has-children > span > .command-wrapper {
    .command-number {
      display: none;
    }
  }

  .command-is-pinned > span > .command-wrapper,
  .command-has-snapshot > span > .command-wrapper:hover {
    .command-number {
      display: none;
    }

    .command-pin {
      display: block;
    }
  }

  .command {
    &.command-is-studio > span > .command-wrapper:hover {
      .command-pin {
        display: none;
      }
      .command-number {
        display: block;
      }
    }
  }

  .command-state-pending > span > .command-wrapper:hover {
    .command-number {
      display: block;
    }

    .command-pin {
      display: none;
    }
  }

  .command-is-pinned > span > .command-wrapper {
    background: lighten($pinned, 40%);
    border-left: 2px solid $pinned;

    &,
    &:hover {
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset;
    }

    &:hover {
      background: lighten($pinned, 38%);
    }

    .command-wrapper-text {
      padding-left: 3px;

      .command-pin {
        color: $pinned;
      }
    }
  }

  .no-commands {
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 3px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    min-height: 20px;
    padding: 9px;
  }

  // utilizing element size queries: https://github.com/marcj/css-element-queries
  // styles take effect when width is greater than or equal to the specified amount
  &[min-width~="300px"] {
    .command-wrapper-text {
      flex-wrap: nowrap;
    }
  }

  .studio-prompt {
    cursor: auto;

    .command-wrapper {
      padding: 5px 10px;
      pointer-events: none;

      .command-wrapper-text {
        align-items: center;

        .command-message {
          .command-message-text {
            color: $pending;
          }
        }

        .command-controls i {
          color: $pending;

          &:hover {
            color: $pending;
          }
        }
      }
    }
  }
}