// Output Test Layout
// ==================

html {
  font-size: 100%;
  line-height: 1.5em;
  font-family: sans-serif;
}

body {
  padding: 1;
}

h1 {
  font-weight: bold;
}

[role="banner"] {
  font-size: 1.5rem;
  line-height: 2rem;
}

.results {
  background-color: rgba(red, .25);
  border: 1px solid red;
  margin-bottom: 1rem;
  margin-top: 1rem;
  padding-bottom: 1rem;
  padding-top: 1rem;

  &:before {
    content: 'Unit Tests: ';
    font-weight: bold;
  }

  &:before, &:after {
    display: inline;
  }
}

.test-module {
  border-bottom: 6px dotted;
  padding-bottom: 1rem;
  margin-bottom: .5rem;

  &:last-of-type {
    padding-bottom: 0;
    border: 0;
  }

  > h1 {
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: .5rem;
  }
}

[class^="test__"] {
  margin-bottom: .5rem;

  h1 {
    padding: .25rem .5rem;
    background: #666;
    color: #eee;
    font-weight: normal;
    font-family: monospace, sans-serif;
  }
}

[class^="assert__"] {
  margin-bottom: .5rem;
  text-align: center;

  div {
    background: rgba(white,.25);
    outline: 1px solid rgba(red,.25);
    outline-offset: -1px;
  }

  .test, .expect {
    @include output((
      background: (
        linear-gradient(to left, rgba(white,.75), rgba(white,.75)),
        rgba(#fcc,.5)
      ),
      background-clip: (content-box, border-box),
    ));
    font-size: .75rem;
    margin-bottom: .5rem;
  }

  .test { outline-color: red; }
  .expect { outline-color: green; }

  .spacer {
    height: 2.5rem;
    outline: 1px solid rgba(#444,.25);
    background: rgba(#444,.125);
  }
}
