commands.scss

@mixin nested-command-dashes($color) {
  border-left: 1px dotted $color;
  border-image-slice: 0 0 0 1;
  border-image-source: repeating-linear-gradient(0deg, transparent, $color, $color 4px);
}

.reporter {
  // rendered within ../hooks/hooks.tsx
  .commands-container {
    background-color: $reporter-section-background;
    min-width: $reporter-contents-min-width;
    padding: 0;

    &:empty {
      display: none;
    }
  }

  .command {
    min-height: 28px;
    font-family: $monospace;
  }

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

      &:hover {
        color: #565554;
      }
    }
  }

  // System Command Styles
  .command-type-system {
    user-select: none;
  }

  // Event Styles
  .command-type-system,
  .command-is-event {
    font-style: italic;

    .command-method,
    .command-message {
      color: $gray-500;
    }
  }

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

  .command-wrapper {
    border-left: 2px solid $reporter-section-background;
    background-color: $reporter-section-background;
    color: $gray-500;
    display: flex;
    min-height: 28px;
    padding-right: 2px;

    &.command-is-interactive:hover {
      background-color: $gray-900;
      cursor: pointer;

      .command-expander > path {
        stroke: $gray-700;
      }
    }

    .command-wrapper-text {
      display: flex;
      flex-wrap: nowrap;
    }

    .command-interceptions {
      font-style: normal;

      .status {
        font-weight: 600;
      }
    }

    // ensures alias & number of children commands don't break if reporter width is narrow
    .alias-container {
      margin-left: 0;
      white-space: nowrap;
  
      > * {
        display: inline-block;
        margin-left: 2px;
      }
    
      > *:first-child {
        margin-left: 0;
      }
    }
  }

  .command-number-column {
    color: #5a5f7a;
    flex-shrink: 0;
    min-height: 1px; // because some numbers are empty
    max-height: 28px; // because some numbers are empty
    padding-top: 4px;
    padding-bottom: 4px;
    text-align: right;
    width: 24px;
  }

  // when no children, add padding to act as the .command-expander-column's width
  // to prevent adding another element to the page
  .command-number-column + span.command-pin-target {
    margin-left: 25px;
  }

  .command-pin-target.command-group {
    @include nested-command-dashes($gray-600);
    padding-left: 12px;
    min-height: 28px;

    .command-group-block {
      @include nested-command-dashes($gray-600);
      width: 11px;
      min-height: 28px;
      min-width: 11px;
    }
  }

  .command-info {
    padding-top: 4px;
    padding-bottom: 4px;
    margin-left: 0;
    overflow: hidden;
    width: 100%;
    font-weight: 600;

    .command-aliases,
    .command-message {
      overflow: hidden;

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

      .fa-circle.command-message-indicator-successful {
        color: $jade-400;
      }

      .fa-circle.command-message-indicator-aborted {
        color: $orange-400;
      }

      .fa-circle.command-message-indicator-bad {
        color: $red-500
      }

      .fa-circle.command-message-indicator-pending {
        color: $indigo-400;
      }
    }
  }

  .command-message-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .command-method {
    font-size: 12px;
    margin-right: 12px;
    min-width: fit-content;
  }

  // Command State Styles
  .command-state-passed {
    border-left: 2px solid $reporter-section-background;

    &.command-is-interactive:hover {
      border-left: 2px solid $gray-900;
    }

    &:not(.command-is-event) .command-number {
      color: $gray-700;
    }
  
    &:not(.command-is-event, .command-type-system) .command-method {
      color: $gray-200;
    }

    .command-message {
      color: $gray-500;
    }
  }

  .command-state-pending {
    border-left: 2px solid $indigo-800;
    background-color: $gray-900;
    cursor: default;
    color: $indigo-200;

    .command-number-column {
      padding-top: 4px;
      padding-bottom: 4px;

      .fa-circle {
        line-height: 18px;
        display: inline-block;
  
        .icon-light {
          stroke: $gray-800;
        }
      }
    }
  }

  .command-state-pending + .command-progress {
    height: 2px;

    span {
      animation-fill-mode: forwards;
      animation-iteration-count: 1;
      animation-name: progress-bar;
      animation-timing-function: linear;
      background: $indigo-500;
      display: block;
      float: right;
      height: 100%;
      transform-origin: right;
      width: 100%;

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

  .command-state-failed {
    color: $err-header-text;

    &:not(.command-type-system) {
      border-left: 2px solid $fail;
      background-color: $err-header-background;
          
      &.command-is-interactive:hover {
        background: rgba($red-400, 0.3);
      }
    }

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

    .command-group {
      border-color: $err-header-text;
      @include nested-command-dashes($err-header-text);

      .command-group-block {
        border-color: $err-header-text;
        @include nested-command-dashes($err-header-text);
      }
    }
  }

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

  // Custom Styles for Specific Commands
  .command-name-assert {
    .command-method {
      span {
        border-radius: 2px;
        padding: 0 3px;
        font-size: 12px;
        display: inline-block;
        line-height: 14px;
      }
    }

    .command-message {
      color: $gray-500;

      strong {
        margin: 0 3px;
      }
    }

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

    .command-state-pending {
      .command-method {
        color: $pending;

        span {
          background-color: $pending;
          color: $black;
        }
      }

      .command-message {
        color: $pending;

        strong {
          color: $indigo-300;
        }
      }
    }

    .command-state-failed {
      .command-method {
        color: $fail;

        span {
          background-color: $fail;
          color: $black;
        }
      }

      .command-message {
        color: $fail;

        strong {
          color: $red-300;
        }
      }
    }

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

        span {
          background-color: $pass;
          color: $black;
        }
      }

      .command-message {
        color: $jade-300;

        strong {
          color: $jade-200;
        }
      }
    }
  }

  .command-pin-target {
    width: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
  }

  .command-message-text {
    font-size: 12px;
    white-space: initial;
    word-wrap: inherit;
    width: 100%;
    -webkit-line-clamp: 50;
    -webkit-box-orient: vertical;
  }

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

  .command-controls {
    display: flex;
    padding-bottom: 4px;
    padding-right: 2px;
    padding-top: 4px;

    svg {
      color: rgba($gray-600, .25);
      color: $gray-600;
      vertical-align: text-top;
    }

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

    label {
      font-size: 85%;
    }

    > * {
      display: inline-block;
      margin-left: 2px;
    }
  
    > *:first-child {
      margin-left: 0;
    }
  }

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

  .command-pin {
    color: $pinned;
    font-size: 12px;
    line-height: 1;
    margin-top: -1px;
    margin-left: 10px;
    outline: none;
    text-align: right;
    width: 15px;
    max-height: 20px;

    .icon-light {
      fill: $purple-700;
    }
  }

  .command-expander-column {
    flex-shrink: 0;
    padding-left: 10px;
    padding-right: 5px;
    padding-top: 4px;
    padding-bottom: 4px;
    width: 25px;
    display: flex;

    .command-expander {
      color: $gray-500;
      transform: rotate(-90deg);
      transition: transform 150ms ease-out;
      margin-top: 5px;

      path {
        stroke: $gray-700;
      }
    }

    .command-expander-is-open {
      transform: rotate(0deg);
    }
  }

  .command-is-pinned {
    background: $indigo-1000;
    border-left: 2px solid $pinned;

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

    &:hover {
      background: $indigo-900;
      border-left: 2px solid $pinned;
    }
  }

  // rendered within ../attempts/attempts.tsx
  .no-commands {
    background-color: $gray-1000;
    border: 1px solid $gray-900;
    border-radius: 3px;
    box-shadow: inset 0 1px 1px rgba($white, 0.05);
    min-height: 28px;
    padding: 9px;
  }
}