@import 'variables'; // including $font-family-sans-serif
@import 'fonts';
@import './Icons.scss';

// Bootstrap
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/root';
@import '~bootstrap/scss/reboot';

/*
 * Unlike other stylesheets, this one does _not_ import import 'reset.scss'.
 * That means the font-size doesn't get reset; so font sizes are different
 * than in other stylesheets. (The practical reason: we don't want reports to
 * have body { height: 100vh }.)
 *
 * TODO make every _other_ stylesheet behave like _this_ one.
 */

body {
  background: white;
  @include font-sans-regular;
  color: $brand-text--darker;
}

header {
  padding: 1.5rem 3rem;
  border-bottom: 1px solid $item-border;

  h1 {
    @include font-sans-bold;
    margin-bottom: 0.2rem;
  }

  .metadata {
    font-size: 0.8rem;
    color: $brand-text--medium;
    margin: 0;

    &>*:not(:last-child)::after { // sometimes <span/><span/><a/>, sometimes <span/><span/>
      content: '-';
      padding: 0 0.15rem 0 0.3rem;
      color: $brand-text--medium;
    }

    a {
      color: $brand-workspace;
    }
  }
}

section {
  /*
   * On Linux/Chrome74 and Linux/Firefox66, setting a width higher than ~42rem
   * made "print" unusable. We can't choose a different print scaling in the
   * `@media print` section because charts are iframes; iframes don't resize
   * the way we want during print.
   *
   * Long-term, we'll make this report wider by rendering PNGs and/or SVGs.
   *
   * Short-term, we're stuck with a somewhat-thin page.
   */
  max-width: 48rem;
  margin: 2.5rem auto;
  padding: 0 1rem;
}

@media print {
  body {
    padding: 0;
  }

  section {
    page-break-inside: avoid; // for printing
  }
}

@import './components/Fonts';
@import './BigTable/index';
@import './Report/index';
