@offWhite: #fafafa;
@gray: #cccccc;
@lightGray: #dedede;
@lightestGray: #fcfcfc;
@darkGray: darken(@gray, 40%);
@yellow: #f0ad4e;
@darkYellow: darken(@yellow, 20%);
@green: #5cb85c;
@lightGreen: lighten(@green, 20%);
@darkGreen: darken(@green, 20%);
@red: #d9534f;
@lightRed: lighten(@red, 20%);
@darkRed: darken(@red, 20%);
@blue: #3bbcf7;
@lightBlue: lighten(@blue, 20%);
@darkBlue: darken(@blue, 20%);

@bodyFont: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@monospaceFont: Consolas, "Liberation Mono", Menlo, Courier, monospace;


.with-left-border(@color) {
  margin-top: 10px;
  margin-bottom: 10px;
  padding-left: 10px;
  border-left: 3px solid @color;
}

.stack-trace {
  line-height: initial;
  display: pre;
  font-family: @monospaceFont;
  font-size: 13px;
  background-color: @lightestGray;
  border: 1px solid @lightGray;
  padding: 5px;
  border-radius: 5px;
  white-space: pre;
  overflow: scroll;
  margin-top: 5px;
}


html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
}

#atom-mocha-test-runner {
  overflow: auto !important;
  margin: 0;
  padding: 0;
  font-family: @bodyFont;
  background-color: @offWhite;
  font-size: initial;
  color: initial;
  line-height: initial;
  flex: 0 1 100%;
}

#atom-mocha-test-runner::shadow {
  .top-header {
    font-size: 18px;
    font-weight: bold;
    padding: 10px;
    padding-bottom: 0;
  }

  .collapser-links {
    font-size: initial;
    display: inline-block;
    margin-right: 10px;
  }

  .current-test {
    margin: 20px 20px 10px;
  }

  .test-status-container {
    padding: 10px;
    font-size: 20px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-width: 1px;
    border-bottom-width: 1px;
    display: flex;

    &.waiting {
      border-color: @darkBlue;
      color: @darkBlue;
      background-color: @lightBlue;
    }

    &.passed {
      border-color: @darkGreen;
      color: @darkGreen;
      background-color: @lightGreen;
    }

    &.failed {
      border-color: @darkRed;
      color: @darkRed;
      background-color: @lightRed;
    }

    .counts {
      text-align: left;
      flex: 1;
    }

    .test-label {
      text-align: center;
      flex: 1;
    }

    .time {
      text-align: right;
      flex: 1;
    }
  }

  .dots-container {
    padding: 10px;
    margin: 0;
    margin-bottom: 10px;

    .dot {
      display: inline-block;
      list-style: none;
      font-weight: bold;
      line-height: 10px;
      font-size: 10px;
      height: 10px;
      width: 10px;
      padding: 3px;
      cursor: default;

      &.waiting {
        color: @gray;
      }

      &.pending {
        color: @yellow;
      }

      &.passed {
        color: @green;
      }

      &.failed {
        color: @red;
      }
    }
  }

  .failures-container {
    margin: 15px 10px 10px;

    .root {
      font-size: 18px;
      margin-bottom: 10px;

      .header {
        font-size: 20px;
        font-weight: bold;
      }
    }

    .tests-container {
      margin-left: 10px;
      margin-top: 10px;
    }

    .test {
      .with-left-border(@red);
      line-height: 26px;
    }

    .assertion-failure {
      font-weight: bold;
      color: @red;
    }

    .stack {
      .stack-trace
    }
  }

  .deprecations-container {
    .deprecations-title {
      margin: 20px 0;
      padding: 10px;
      font-size: 20px;
      border-top-style: solid;
      border-bottom-style: solid;
      border-top-width: 1px;
      border-bottom-width: 1px;
      border-color: @darkGray;
      background-color: @lightGray;
      text-align: center;
      color: @darkGray;
    }

    .deprecation {
      .with-left-border(@darkGray);
      line-height: 24px;
      margin-left: 20px;
    }

    .stack {
      .stack-trace
    }
  }
}