.pipe {
  margin-top: 20px;
  &--cmd {
    margin-bottom: 10px;
    button {
      color: rgba(var(--light), 1);
      padding: 6px 20px 6px 6px;
      width: 100%;
      text-align: left;
      display: flex;
      align-items: center;
      svg {
        width: 24px;
        height: 24px;
        fill: rgba(var(--light), 1);
        margin-right: 5px;
      }
    }
    &-success {
      background-color: rgba(var(--green), 1);
      .output {
        border: 1px solid rgba(var(--green), 1);
        border-top: none;
      }
    }
    &-fail {
      background-color: rgba(var(--red), 1);
      .output {
        border: 1px solid rgba(var(--red), 1);
        border-top: none;
      }
    }
    &-warning {
      background-color: rgba(var(--yellow), 1);
      .output {
        border: 1px solid rgba(var(--yellow), 1);
        border-top: none;
      }
    }
    &-running {
      background-color: rgba(var(--dark), 1);
      .output {
        border: 1px solid rgba(var(--dark), 1);
        border-top: none;
      }
    }
  }
  &--icon {
    transition: transform 0.22s;
    &_hidden {
      visibility: hidden;
    }
    &_show {
      transform: rotate(45deg);
    }
  }
  &--title {
    margin-right: auto;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 500;
  }
  .fas {
    margin: 4.5px 10px 4.5px 0;
  }
  &--execTime {
    font-size: 16px;
    line-height: 1.4;
    font-weight: 500;
  }
  .output {
    max-height: 500px;
    overflow: auto;
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: 0.16px;
    padding: 20px;
    background-color: rgba(var(--light), 1);
    font-family: monospace;
    .err {
      color: rgba(var(--red), 1);
    }
    span {
      white-space: nowrap;
    }
  }
}