//          888          888               888
//          888          888               888
//          888          888               888
//  .d88b.  888  .d88b.  88888b.   8888b.  888
// d88P"88b 888 d88""88b 888 "88b     "88b 888
// 888  888 888 888  888 888  888 .d888888 888
// Y88b 888 888 Y88..88P 888 d88P 888  888 888
//  "Y88888 888  "Y88P"  88888P"  "Y888888 888
//      888
// Y8b d88P
//  "Y88P"

// Global
//
// Coming soon...
//
// Styleguide Components.Global
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: $font-size-root;
}

body {
  background-color: $color-theme-base-background;
  color: $color-theme-base-text;
  font-family: $font-family-base;
  font-kerning: normal;
  font-size: $font-size-m;
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: lining-nums;
  font-weight: $font-weight-normal;
  line-height: $line-height-base;
  margin: 0;
  overflow-x: hidden;
  overflow-y: initial;
  position: relative;

  &.body-scrollable {
    overflow-x: initial;

    .site-search.site-query {
      overflow-x: visible;

      > article {
        overflow-x: visible;
      }

      .constrained {
        max-width: initial;
        width: initial;
      }
    }
  }
}

::selection {
  background-color: $color-theme-dark-background-alt;
  color: $color-theme-dark-text;
  text-shadow: 0;
}

:focus {
  outline: none;
}

::placeholder {
  color: color(grey, 75);
  opacity: 1;
}

a,
area,
button,
input,
label,
select,
summary,
textarea,
[role='button'] {
  touch-action: manipulation;
}

a {
  color: $color-theme-base-link;
  cursor: pointer;
  text-decoration: underline;
  transition: $transition-base;

  .on-dark & {
    color: $color-theme-dark-link;
  }

  .on-light & {
    color: $color-theme-base-link;
  }

  &[href*='//']:not([href*="dataweb.usitc.gov"]) {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAwIDEwMDAiPjx0aXRsZT5leHRlcm5hbDwvdGl0bGU+PHN0eWxlPnBhdGggeyBmaWxsOiAjMGY3NThhOyB9PC9zdHlsZT48cGF0aCBkPSJNOTQ4Ljc1LDMyNC4xNCw4NzkuMjUsMjIxLDY3Ni41OSw0MjMuNjRhMjAuNzYsMjAuNzYsMCwwLDEtMjkuMjYsMGwtNzMuMTYtNzMuMTZhMjAuNzYsMjAuNzYsMCwwLDEsMC0yOS4yN0w3NzYuODIsMTE4LjU2bC0xMDEtNjcuMzFjLTE2LjgzLTExLTguNzgtMzYuNTgsMTEtMzcuMzFMOTc4Ljc0LDBjMTIuNDQtLjczLDIyLDguNzgsMjEuMjIsMjEuMjJsLTEzLjksMjkxLjlDOTg0LjYsMzMzLjY1LDk1OS43MiwzNDEsOTQ4Ljc1LDMyNC4xNFoiLz48cGF0aCBkPSJNODI2LjMyLDM1NS4yNVY4MTAuNTNhMTUuNjcsMTUuNjcsMCwwLDEtMTUuMjcsMTUuMjZIMTg5YTE1LjY3LDE1LjY3LDAsMCwxLTE1LjI3LTE1LjI2VjE4OC40MmMwLTcuODMsNi44NS0xNC4yMSwxNS4yNy0xNC4yMUg2NDMuNjdsNTAtNTBIMTg5Yy0zNS43OSwwLTY1LjI3LDI4LjQyLTY1LjI3LDY0LjIxVjgxMC41M2MwLDM1Ljc5LDI5LjQ4LDY1LjI2LDY1LjI3LDY1LjI2aDYyMi4xYzM1Ljc5LDAsNjUuMjctMjkuNDcsNjUuMjctNjUuMjZWMzA1LjI1WiIvPjwvc3ZnPg==);
    background-position: center right;
    background-repeat: no-repeat;
    background-size: ($space-m * 0.75);
    padding-right: ($space-m * 0.85);

    &:active,
    &:focus,
    &:hover {
      background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAwIDEwMDAiPjx0aXRsZT5leHRlcm5hbDwvdGl0bGU+PHN0eWxlPnBhdGggeyBmaWxsOiAjMDUyNzJlOyB9PC9zdHlsZT48cGF0aCBkPSJNOTQ4Ljc1LDMyNC4xNCw4NzkuMjUsMjIxLDY3Ni41OSw0MjMuNjRhMjAuNzYsMjAuNzYsMCwwLDEtMjkuMjYsMGwtNzMuMTYtNzMuMTZhMjAuNzYsMjAuNzYsMCwwLDEsMC0yOS4yN0w3NzYuODIsMTE4LjU2bC0xMDEtNjcuMzFjLTE2LjgzLTExLTguNzgtMzYuNTgsMTEtMzcuMzFMOTc4Ljc0LDBjMTIuNDQtLjczLDIyLDguNzgsMjEuMjIsMjEuMjJsLTEzLjksMjkxLjlDOTg0LjYsMzMzLjY1LDk1OS43MiwzNDEsOTQ4Ljc1LDMyNC4xNFoiLz48cGF0aCBkPSJNODI2LjMyLDM1NS4yNVY4MTAuNTNhMTUuNjcsMTUuNjcsMCwwLDEtMTUuMjcsMTUuMjZIMTg5YTE1LjY3LDE1LjY3LDAsMCwxLTE1LjI3LTE1LjI2VjE4OC40MmMwLTcuODMsNi44NS0xNC4yMSwxNS4yNy0xNC4yMUg2NDMuNjdsNTAtNTBIMTg5Yy0zNS43OSwwLTY1LjI3LDI4LjQyLTY1LjI3LDY0LjIxVjgxMC41M2MwLDM1Ljc5LDI5LjQ4LDY1LjI2LDY1LjI3LDY1LjI2aDYyMi4xYzM1Ljc5LDAsNjUuMjctMjkuNDcsNjUuMjctNjUuMjZWMzA1LjI1WiIvPjwvc3ZnPg==);
    }

    &.no-icon {
      &,
      &:active,
      &:focus,
      &:hover {
        background-image: none;

        &:not(.button) {
          padding-right: 0;
        }
      }
    }
  }

  &:active,
  &:focus,
  &:hover {
    background-color: $color-theme-base-hover-background;
    color: $color-theme-base-hover-text;

    .on-dark & {
      background-color: $color-theme-dark-hover-background;
      color: $color-theme-dark-hover-text;
    }

    .on-light & {
      background-color: $color-theme-base-hover-background;
      color: $color-theme-base-hover-text;
    }
  }
}

abbr {
  &,
  &[title] {
    cursor: help;
    font-variant: small-caps;
    text-decoration: none;
    text-transform: lowercase;
  }
}

article {
  section {
    + section {
      margin-top: $space-l;
    }
  }
}

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
}

code,
kbd,
pre,
samp {
  font-family: $font-family-mono;
}

dl {
  dt {
    font-weight: $font-weight-bold;
  }

  dd {
    margin-bottom: $space-s;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

ds-site-nav {
  nav {
    grid-area: site-nav;
    height: $off-canvas-height;
    left: (-$off-canvas-width);
    overflow: auto;
    position: fixed;
    top: 0;
    transition: $off-canvas-transition;
    width: $off-canvas-width;
    z-index: 99;

    @include breakpoint(#{$off-canvas-open-at}) {
      left: 0 !important;
    }

    &.open {
      left: 0;
    }
  }

  .button-close {
    background-color: $color-theme-base-background;
    color: $color-theme-base-accent;
    height: 36px;
    width: 36px;

    @include breakpoint(#{$off-canvas-open-at}) {
      display: none;
    }

    &:active,
    &:focus,
    &:hover {
      background-color: $color-state-info-background-alt;
    }
  }
}

hr {
  border: none;
  border-top: $border-base;
  height: 0;
  margin: $space-m 0;
}

main > article > h1:first-child {
  margin-top: 0;
}

p {
  margin-bottom: $space-m;

  &:last-child {
    margin-bottom: 0;
  }
}

table {
  margin-bottom: $space-m;

  &:last-child {
    margin-bottom: 0;
  }

  td,
  th {
    padding: $space-s;
  }

  th {
    font-weight: $font-weight-bold;
  }
}

ol,
ul {
  margin-bottom: $space-m;
  padding-left: $space-l;

  &:only-child,
  &:last-child li:last-child {
    margin-bottom: 0;
  }

  li {
    margin: 0 0 $space-s;
    list-style: disc;
  }

  &.clean {
    padding: 0;

    li {
      list-style: none;
      margin: 0 0 $space-m;
    }
  }
}

ol li {
  list-style: decimal;
}

pre {
  background-color: color(white);
  border: $border-base;
  color: color(black);
  font-family: $font-family-mono;
  padding: $space-s;
}

small {
  font-size: 75%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

[hidden] {
  display: none !important;
}

.alt {
  background-color: color(grey, 95);
}

.alt-off {
  background-color: $color-theme-base-background;
}

.constrained {
  @include constrained;
}

.disclaimer {
  font-size: $font-size-xs;
}

.display-grid {
  display: grid;
}

.dlist-grid {
  @include breakpoint(m) {
    display: grid;
    grid-template-columns: repeat(2, auto);
  }

  dt {
    font-weight: $font-weight-bold;
    margin: 0;
    padding: $space-s $space-s 0;

    &::after {
      content: ':';
    }

    @include breakpoint(m) {
      border-bottom: 1px solid color(grey, 80);
      padding: $space-s;
    }
  }

  dd {
    border-bottom: 1px solid color(grey, 80);
    margin: 0;
    padding: 0 $space-s $space-s;

    @include breakpoint(m) {
      padding: $space-s;
    }

    ul {
      margin: $space-s (-$space-s) (-$space-s);
      padding: 0;

      @include breakpoint(m) {
        margin-top: (-$space-s);
      }

      li {
        list-style: none;
        margin-bottom: 0;
        padding: $space-s;

        &:nth-child(odd) {
          background-color: color(grey, 95);
        }
      }
    }
  }

  h2,
  h3,
  h4,
  h5,
  h6 {
    background-color: color(grey, 95);
    margin: $space-m 0 0;
    padding: $space-s $space-s ($space-s + $space-xxs);

    @include breakpoint(m) {
      grid-column-start: 1;
      grid-column-end: 3;
    }

    &.section-header {
      margin-top: $space-l;
    }

    small {
      display: block;
      font-size: $font-size-m;
      font-style: italic;
      margin-top: $space-xs;
    }
  }
}

.grid-link {
  display: grid;
  justify-self: stretch;
  margin: 0 !important;
  text-align: center;

  a {
    background-color: color(grey, 95);
    color: $color-theme-base-text;
    display: block;
    padding: $space-m;
    text-decoration: none;

    &:active,
    &:focus,
    &:hover {
      background-color: $color-theme-dark-background-alt;
      color: $color-theme-dark-text;
    }
  }
}

.notice {
  color: color(red, 40);
}

.nowrap {
  white-space: nowrap;
}

.nowrap-at-m {
  @include breakpoint(m) {
    white-space: nowrap;
  }
}

.on-dark {
  background-color: $color-theme-dark-background;
  color: $color-theme-dark-text;

  &.on-dark-alt {
    background-color: $color-theme-dark-background-alt;
  }

  &.on-dark-grey {
    background-color: color(grey, 20);
  }
}

.pos-relative {
  position: relative;
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.read-more {
  max-height: $transition-max;
  overflow: hidden;
  transition: max-height $transition-base-time $transition-base-easing;

  &.read-more-hidden {
    max-height: 0;
  }
}

.read-more-content {
  p:last-of-type {
    margin-bottom: 0;
  }

  dt:first-child {
    margin-top: $space-m;
  }
}

.outline-list {
  li {
    list-style-type: upper-roman;

    li {
      list-style-type: upper-latin;

      li {
        list-style-type: decimal;

        li {
          list-style-type: lower-latin;

          li {
            list-style-type: lower-roman;
          }
        }
      }
    }
  }

  ol {
    margin-top: $space-s;
  }
}

.scrollable {
  max-height: 400px;
  min-height: $space-l;
  overflow-y: scroll;

  &.mh-250 {
    max-height: 250px;
  }
}

.site-content {
  display: flex;
  flex-direction: column;
  grid-area: site-content;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.site-layout {
  grid-template-columns: $off-canvas-width auto;
}

.site-layout-with-nav {
  @include breakpoint(#{$off-canvas-open-at}) {
    display: grid;
    grid-template-areas: 'site-nav site-content';
    grid-template-columns: $off-canvas-width auto;
  }
}

.site-outlet {
  flex: 1;
}

.tag-label {
  background-color: $color-theme-base-background-alt;
  color: $color-theme-base-text;
  display: inline-block;
  font-size: $font-size-xxs;
  font-weight: $font-weight-bold;
  line-height: $line-height-button;
  padding: $space-xxs;
  position: relative;
  top: $space-xxs;

  &:first-child {
    margin-left: 0;
  }

  &:last-child {
    margin-right: 0;
  }
}

.toggle-nav {
  @include breakpoint(#{$off-canvas-open-at}) {
    display: none !important;
  }

  button {
    display: block;
    position: relative;

    &:active,
    &:focus,
    &:hover {
      span {
        background-color: $color-theme-dark-text;
      }
    }

    span {
      background-color: $color-theme-base-text;
      border-radius: 3px;
      display: block;
      height: 3px;
      position: relative;
      transition-duration: 0.15s;
      transition-timing-function: ease-in-out;
      width: $space-m;

      &:nth-child(1) {
        top: -3px;
        transition-property: background-color, top, transform;
      }

      &:nth-child(2) {
        transition-property: background-color;
      }

      &:nth-child(3) {
        bottom: -3px;
        transition-property: background-color, bottom, transform;
      }

      .site-nav-open & {
        &:nth-child(1) {
          top: 3px;
          transform: rotate(45deg);
        }

        &:nth-child(2) {
          background-color: transparent;
        }

        &:nth-child(3) {
          bottom: 3px;
          transform: rotate(-45deg);
        }
      }
    }
  }
}

.unpad {
  margin: (-$space-m) !important;
}

.visually-hidden {
  height: 1px;
  left: -9999rem;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 1px;
}