@import "bootstrap";

$main-size: 1rem;
$main-highlight: $mdc-theme-primary;

.debug {
  margin: 0;
  padding: 0;
  background-color: white;
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;

  .missing-tests-log {
    margin: 0 1rem;

    ul {
      padding: 0;
      list-style: none;

      li {
        background: $mdc-theme-secondary-light;
        border: solid .01rem dimgray;

        @include border-radius($main-size / 3);
      }
    }
  }

  #qunit {
    padding: 6rem 1rem 1rem;

    h1 {
      a {
        text-decoration: none;
      }
    }

    h2 {
      margin: $main-size 0;
    }

    a {
      color: $main-highlight;
      cursor: pointer;
    }

    pre {
      white-space: pre-line;
    }

    ol {
      margin-top: $main-size;
      padding-left: 0;
      list-style: inside none;

      li {
        display: none;
        overflow: auto;
        margin-bottom: $main-size;
        padding: $main-size * .65;

        &.pass {
          display: list-item;
          background-color: lighten(green, 25%);
        }
        &.fail {
          display: list-item;
          background-color: lighten(darkred, 25%);
        }

        a {
          display: block;
          width: 12rem;
          margin: .5rem 0;
          padding: .25rem;
          border: dashed .05rem orange;
          background-color: black;
          color: orange;
          font: 1rem monospace;
          text-transform: uppercase;
          text-decoration: none;

          @include transition(all .25s ease-in-out);

          &:hover {
            background-color: orange;
            color: black;
            padding-right: 20%;

            @include transition(all .25s ease-in-out);
          }

          &:active {
            background-color: white;
          }
        }

        ol {
          list-style-type: decimal;
        }
      }
    }

    ol#qunit-tests {
      > li {
        border: solid .01rem dimgray;

        @include border-radius($main-size / 2);
        @include box-shadow(.05rem .05rem .05rem lightgray);
      }
    }

    #qunit-header {
      margin: 0;
    }

    .qunit-source {
      font-family: monospace;
      font-size: .8rem;
    }
  }

  #qunit-testrunner-toolbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    padding: .5rem .25rem;
    background-color: $mdc-theme-primary;
    color: $mdc-theme-background;

    @include box-shadow(.1rem .1rem .1rem lightgray);

    form {
      margin: $main-size * .5 0;
      padding-left: .25rem;
    }

    label,
    input, textarea, select, button {
      display: inline;
      width: auto;
    }

    input, textarea, select, button {
      background-color: $mdc-theme-background;
      border: 0 none;
      padding: .25rem .5rem;
    }

    input[type="checkbox"] {
      position: relative;
      top: .15rem;
      margin: 0 .3rem 0 .5rem;

      $checkbox-offset: -.1rem;

      &::after {
        pointer-events: none;
        content: "";
        position: absolute;
        top: $checkbox-offset;
        right: $checkbox-offset;
        bottom: $checkbox-offset;
        left: $checkbox-offset;
        background-color: $mdc-theme-background;
        border: solid .1rem $mdc-theme-background;
      }

      &:checked {
        &::after {
          background-color: $mdc-theme-secondary;
        }
      }
    }

    button {
      background-color: $mdc-theme-secondary-light;

      &:focus {
        background-color: $mdc-theme-secondary;
      }
    }

    label {
      margin-left: 0;
      font-size: .8rem;

      & + label + label {
        margin-left: $main-size * .5;
      }

      @media (max-width: $display-mobile-l) {
        font-size: x-small;
      }

      @media (max-width: $display-mobile-m) {
        font-size: xx-small;

        &[for="qunit-urlconfig-notrycatch"] {
          display: none;
        }
      }
    }

    #qunit-filter-input {
      @media (max-width: $display-mobile-s) {
        width: 7rem;
      }
    }

    #qunit-modulefilter {
      display: none;
    }
  }

  #qunit-userAgent {
    font-size: 1rem;
  }
}