body#test

  aside
    width 600px
    font 14px var(--tonic-monospace)
    white-space pre-wrap
    padding 20px 60px 60px 60px
    overflow scroll
    position fixed
    top 0
    right 0
    bottom 0
    background-color #f8f8f8

    span
      display block

      &.title
        margin-top 30px

      &.result.OK
        color green

      &.result:not(.OK)
        color red

  .test-summary
    display flex

  #passing,
  #total,
  #status
    margin 0 10px
    margin-right 80px

    h1
      font-weight 700
      display block
      margin 8px 4px
      padding 0

    label
      margin 0 4px
      text-transform uppercase
      display block

  #status
    &:not(.fail)
      color green

    &.fail
      color red

  main
    left 0
    right 600px

    > section
      padding-bottom 0
      margin 0 auto
      display flex
      flex-wrap wrap
      justify-content flex-start

  h2
    flex-basis 100%
    margin 60px 1.5% 30px 1.5%

  .test-container
    border 1px solid #eaeaea
    flex-basis 47%
    padding 20px
    margin 1.5%
    display flex
    flex-wrap wrap
    justify-content space-between
    align-items center

    > span
      display block
      width 100%

      &:first-of-type
        font 14px var(--tonic-monospace)
        width 100%
        display block
        padding 15px 0

    &.dark
      background-color #333333
      > span
        color white

  tonic-toggle
    display block
    width 100%