.reporter {
  header {
    background-color: #f8f8f8;
    border-bottom: 1px solid #ddd;
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    min-height: $header-height;
    outline: 0;
    overflow: hidden;
    width: 100%;
    z-index: 1;

    .spacer {
      flex-grow: 2;
    }

    button {
      background-color: #f8f8f8;
      border-color: transparent;
      border-radius: 0;
      display: block;
      line-height: 26px;
      outline: 0;
      padding: 10px 0;
      text-align: center;
      width: 40px;

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

      &:active {
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
      }

      &[disabled],
      &[disabled]:hover,
      &[disabled]:active {
        background: none;
        box-shadow: none;
        color: #999;
      }
    }
  }

  .focus-tests {
    display: flex;

    button {
      border-right: 1px solid #ddd;
      font-weight: 400;
      padding: 10px 12px;
      width: auto !important;

      span {
        display: none;
      }

      i {
        margin-right: 5px;
      }
    }
  }

  .stats {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0;
    padding: 0;

    li {
      display: block;
      font-size: 16px;
      height: 46px;
      line-height: 26px;
      list-style-type: none;
      padding: 10px 5px;

      &.passed {
        color: #23AE89;
      }

      &.failed {
        color: #E94B3B;
      }

      &.pending {
        color: #aaa;
      }

      i {
        margin: 5px;
      }
    }

    .duration {
      border-left: 1px solid #ddd;
      border-right: 1px solid #ddd;
      padding-left: 10px;
      padding-right: 10px;
    }
  }

  .controls {
    display: flex;
    flex-wrap: wrap;

    > span {
      display: flex;

      &:last-child button {
        border-right: 1px solid #ddd;
      }
    }

    .paused-label {
      align-items: center;
      margin-right: 5px;

      label {
        background-color: #CC4239;
      }
    }

    i {
      font-size: 90%;
      margin: 5px;

      &.fa-redo {
        font-size: 100%;
        position: relative;
        top: 1px;
      }
    }

    .toggle-auto-scrolling {
      line-height: 25px;

      i {
        font-size: 100%;
      }

      i:first-child {
        @extend .far;
        @extend .#{$fa-css-prefix}-circle;
        color: #999;
        font-size: 80%;
        margin-right: 3px;
        position: relative;
        top: -1px;
      }

      &.auto-scrolling-enabled {
        i:first-child {
          @extend .fas;
          @extend .#{$fa-css-prefix}-circle;
          color: $yellow-dark;
        }
      }
    }
  }

  // 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~="398px"] {
    header button {
      width: 50px;
    }

    .focus-tests button span {
      display: inline;
    }

    .stats li {
      padding: 10px;
    }
  }
}