.reporter {
  .error {
    background-color: #f5f5f5;
    min-height: 20px;
    padding: 24px;

    h2 {
      color: #e94f5f;
      font-size: 1.3em;
      font-weight: 500;
      line-height: 1.4;
      margin-bottom: 0.6em;

      > i {
        margin-right: 5px;
      }

      a {
        float: right;
      }
    }

    p, ul, ol {
      font-size: 1.1em;
    }

    pre {
      background: #fcf8e3;
      display: block;
      width: 100%;
      white-space: initial;
      overflow: hidden;
      line-height: 1.6;

      code {
        font-family: inherit;
      }
    }

    ul {
      line-height: 1.6;
      margin-bottom: 10px;
      padding-left: 2em;
    }

    ul li {
      list-style: disc
    }

    ol li {
      list-style: decimal;
    }
  }

  .runnable-err-wrapper {
    cursor: default;
    margin: 5px 0 5px 5px;
    padding-left: 10px;
    border-left: 1px dotted #DDD;
  }

  .studio-err-wrapper {
    display: none;
    text-align: center;
  }

  &.studio-active .attempt-failed .studio-err-wrapper {
    display: block;
  }

  .runnable-err {
    border-left: 2px solid $fail;
    background-color: $err-background;
    clear: both;
    color: $err-text;
    margin-bottom: 0;
    margin-top: 5px;
    white-space: pre-wrap;
    word-break: break-word;
    user-select: initial;
    overflow: auto;
  }

  .runnable-err-header {
    display: flex;
    justify-content: space-between;
    background-color: $err-header-background;
    padding: 5px 10px;
    font-weight: bold;

    .runnable-err-name {
      flex-grow: 2;
      font-size: 13px;
      line-height: 22px;;

      i {
        font-size: 10px;
        margin-right: 10px;
      }
    }
  }

  .runnable-err-docs-url {
    margin-left: 0.5em;
    cursor: pointer;
    font-family: $font-sans;
  }

  .runnable-err-message {
    padding: 10px;
    font-family: $monospace;
    color: $err-text;
    font-size: 1em;

    code {
      background-color: $err-code-background;
      border-radius: 5px;
      padding: 2px 5px;
    }

    strong {
      color: $err-text;
      font-weight: bold;
    }
  }

  .runnable-err-stack-expander {
    display: flex;

    .collapsible-header {
      flex-grow: 1;

      &:focus {
        outline: 0;

        div {
          background: #fee0e3;
        }
      }

      div {
        background: #ffeaec;
        cursor: pointer;
        outline: none;
        padding: 7px 5px;
        width: 100%;

        &:hover {
          background: $err-header-background;
        }

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

        .collapsible-header-text {
          color: #4f4f4f;
          font-size: 13px;
        }

        .collapsible-indicator {
          line-height: 18px;
          color: #bbbcbd !important;
        }
      }
    }

    .runnable-err-print {
      &:focus {
        outline: none;

        div {
          background: $err-header-background;
        }
      }

      div {
        background: #ffeaec;
        color: #4f4f4f;
        cursor: pointer;
        font-size: 13px;
        height: 100%;
        padding: 7px 10px;
        width: 100%;

        &:focus {
          outline: none;
        }

        &:hover {
          background: $err-header-background;
        }

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

        i {
          border: solid 1px #4f4f4f;
          border-radius: 4px;
          font-size: 6px;
          padding: 4px 3px;
          vertical-align: middle;
        }

        span {
          vertical-align: middle;
        }
      }
    }
  }

  .runnable-err-stack-trace {
    font-family: $monospace;
    overflow: auto;
    padding: 10px;

    .err-stack-line {
      white-space: pre;

      // ensure empty lines still take up vertical space
      &:empty:before {
        content: ' ';
      }
    }
  }

  .test-err-code-frame {
    background-color: #fff;
    border: 1px solid #ffe4e7;
    margin: 0 10px 10px;

    .runnable-err-file-path {
      &:before {
        @extend .#{$fa-css-prefix};
        @extend .#{$fa-css-prefix}-file;
        color: #bdbdbd;
        margin-right: 5px;
      }

      background: #f6f6f6;
      display: block;
      font-size: 13px;
      line-height: 24px;
      padding: 3px 10px;
      word-break: break-all;
    }

    pre {
      background-color: #fff;
      border: 0;
      padding-left: 10px;
    }
  }
}