// Layouts: Documentation
// Based off of U.S. Web Design Standards Styleguide

@import "../base-shared";
@import "shared";

// Navigation ------------- //
.overlay {
  @include position(fixed, 0 0 0 0);
  @include transition;
  background: #000;
  opacity: 0;
  visibility: hidden;
  z-index: 9999;

  &.is-visible {
    visibility: visible;
  }
}

// Header overrides --------- //
.usajobs-documentation-header__dslink {
  svg {
    width: 10rem;
    vertical-align: middle;
    color: $color-secondary-darkest;

    @media screen and (min-width: $nav-width) {
      max-width: 13.8rem;
    }
  }
}

.usa-header-extended .usa-navbar,
.usa-header-extended .usa-nav-inner {
  max-width: $site-max-width;
}

.usa-nav-close,
.usa-nav-close:hover {
  color: $color-gray-dark;
}

// Mega menu overrides ---------- //
.usa-nav-submenu h5 {
  margin: 0;
  padding: 0.75rem $size-S 0.75rem 2.8rem;
  line-height: 1.3;

  @media screen and (min-width: $nav-width) {
    padding: 0.75rem $size-S 0.75rem $size-default;
    color: $color-white;
  }
}

// Main Content --------- //
.l-doc {
  position: relative;
  max-width: $site-max-width;
  margin: $size-M auto 5em auto;
  @include contentGutter();
}

.l-doc--full_bleed {
  .styleguide-content {
    max-width: inherit;
  }
}

.l-shell-doc.main-content {
  margin-top: $size-XL;
}

// Styleguide Content -------- //
.styleguide-content {
  max-width: $site-max-width-docs;

  > h1 {
    margin-top: 0;

    &:not(:first-child) {
      margin-top: $size-default;
    }
  }
}

.site-subheading {
  font-size: $small-font-size;
  font-weight: 400;
  line-height: 1.5;
  text-transform: uppercase;
  color: $color-gray;
  display: block;
  letter-spacing: 0.5px;
  margin-top: 0;
  margin-bottom: $size-base;
}

.main-content .maturity,
.usajobs-content .maturity {
  text-decoration: none;
  color: $color-white;

  &.incomplete {
    background-color: $color-secondary-dark;
  }

  &.under_review {
    background-color: $color-gold;
    color: $color-base;
  }

  &.design_complete {
    background-color: $color-cool-blue-lighter;
    color: $color-base;
  }

  &.available {
    background-color: $color-green-lighter;
    color: $color-base;
  }
}

// Footer --------------- //
.usa-styleguide-footer {
  background-color: $color-primary-darkest;
  padding: {
    bottom: 3rem;
    top: 3rem;
  }

  // This is a styleguide-only rule and is not needed in the main library code for
  // the footer component which uses different styles
  // TODO investigate why it's not needed in the main library CSS
  p,
  a {
    @include media($medium-screen) {
      margin-bottom: 0;
    }
    color: $color-white;
    font-size: $h5-font-size;
    margin: {
      bottom: 1.5rem;
      top: 0;
    }
  }
}

// Pattern Preview Boxes -------- //
.preview {
  @include clearfix();
  background-color: #fff;
  margin: {
    top: 2em;
    bottom: 2em;
  }
  padding: $size-default $site-margins;
  border: 1px solid $color-gray-lightest;

  &.compact {
    padding: 1rem 0;

    .usa-heading-alt {
      margin-left: $size-default;
      margin-right: $size-default;
    }
  }

  &.super-compact {
    padding: 0;

    .usa-heading-alt {
      margin-left: $size-default;
      margin-right: $size-default;
    }
  }

  &.full-bleed {
    margin-left: -#{$size-default};
    margin-right: -#{$size-default};
    padding: 0;

    @include media($L) {
      margin-left: -#{$size-M};
      margin-right: -#{$size-M};
      padding: 0;
    }
  }

  .is-peripheral {
    opacity: 0.2;
  }
}

.preview-no_border {
  border: 0;
  margin: {
    top: 0;
    bottom: 2em;
  }
  padding: 0;
}

// Specific overried to revert a fix we have in production in the JOA
.preview .usajobs-joa-intro .usajobs-joa-aside {
  // This is only for display purposes in the documentation! Do not copy to production!!!
  max-height: inherit;
}

// Code Sample Boxes --------- //
.code-snippets {
  .code-snippet-button:after {
    content: "\25be  hide code";
  }

  &.hidden {
    table {
      display: none;
    }

    .code-snippet-button:after {
      content: "\25b8  show code";
    }
  }

  table {
    table-layout: fixed;
    width: 100%;
    padding: 3em 0 0 0;

    td {
      background-color: #f5f5f5;
      border: 1px solid #e0e0e0;
      position: relative;
      vertical-align: top;

      .code-copy-button {
        border-radius: 0;
        position: absolute;
        margin: 0;
        right: 0;
        top: 0;

        &:hover {
          background-color: $color-base;
        }
      }
    }

    th {
      border: none;
      text-align: left;
    }

    pre,
    code {
      direction: ltr;
      text-align: left;
      white-space: pre;
      word-spacing: normal;
      word-break: normal;
    }

    pre {
      padding: 0 1em 1em 1em;
    }

    code {
      font-size: $base-font-size / 1.5;
      line-height: 1.4em;
      word-wrap: break-word;

      &.language-html {
        max-width: 25em;
      }
    }
  }
}

// Custom styles to illustrate invisible grid for web design standards
.usa-grid-example {
  background: $color-grid-light;

  > * {
    color: $color-white;
    padding: 1em;
    background: $color-grid-dark;
    margin: {
      top: 0.5em;
      bottom: 0.5em;
    }
  }

  .usa-width-one-twelfth {
    @include media($medium-screen) {
      padding: {
        left: 0;
        right: 0;
      }
    }
  }
}

.usa-grid-example-blank {
  text-align: center;
}

.usa-grid-text {
  background: $color-grid-dark;

  > * {
    background: $color-grid-light;
    color: #000;
  }

  h3 {
    margin-top: 0;
  }

  p {
    margin-bottom: 0;
  }
}

// Custom styles to illustrate spacing
.usajobs-spacing-example {
  &__item {
    font-size: $small-font-size;
    color: $color-gray-dark;
    margin-bottom: $size-default;
  }

  &__space {
    background-color: $color-primary-alt;

    &.XS {
      width: $size-XS;
    }
    &.base {
      width: $size-base;
    }
    &.S {
      width: $size-S;
    }
    &.default {
      width: $size-default;
    }
    &.SM {
      width: $size-SM;
    }
    &.M {
      width: $size-M;
    }
    &.L {
      width: $size-L;
    }
    &.XL {
      width: $size-XL;
    }
    &.XXL {
      width: $size-XXL;
    }
  }
}

h3 + .button_wrapper {
  margin-top: -0.5em;
}

.button_wrapper {
  clear: both;
  display: table;
  margin-left: -1rem;
  padding: 0rem 1rem;

  &:after {
    content: "\A";
    white-space: pre;
  }

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

.button_wrapper-dark {
  background: #323a45;
}

.usa-heading {
  color: $color-primary-darker;
}

// Colors -------------- //
.usa-color-short {
  height: 7rem;
  margin-bottom: 1rem;
}

.usa-color-name {
  @include media($medium-screen) {
    margin: 0;
  }
  margin: {
    bottom: 1em;
    top: 0;
  }
}

.usa-color-row {
  margin-bottom: 3rem;

  .color-big {
    @include media($medium-screen) {
      float: left;
      padding-right: 4%;
      width: 32%;
    }
  }

  .color-small {
    float: left;
    width: 50%;

    @include media($medium-screen) {
      width: 17%;
    }
    margin-right: 0;
  }

  p {
    font-family: monospace, monospace;
  }
}

.usa-primary-color-section {
  @include media($medium-screen) {
    margin-bottom: 8rem;
  }
  margin-bottom: 0;

  .usa-color-square {
    @include span-columns(6);
    margin-bottom: 7rem;
    padding-bottom: 50%;
    position: relative;

    @include media($medium-screen) {
      @include span-columns(3);
      margin-bottom: 0;
      padding-bottom: 19%;
    }
  }

  .usa-mobile-end-row {
    @include media($medium-screen) {
      margin-right: 2.35765%;
    }
    margin-right: 0;
  }

  .usa-color-name {
    margin: 0;
  }
}

.usa-color-inner-content {
  position: absolute;
  top: 100%;
}

.usa-color-hex {
  font-weight: $font-bold;
  margin: {
    bottom: 0;
    top: 1rem;
  }
}

.usa-color-name {
  font-size: 1.2rem;
}

.usa-color-text {
  font-weight: $font-bold;
  margin-bottom: 0.4rem;
  padding: {
    bottom: 1rem;
    left: 2rem;
    right: 2rem;
    top: 1rem;
  }
}

.usa-color-outline {
  .usa-color-text {
    box-shadow: inset 0 0 0 1px $color-gray;
  }
}

.usa-color-text-white {
  color: $color-white;
}

// Color background helpers
.usa-color-green-dark {
  background-color: $color-green-dark;
}

.usa-color-green-light {
  background-color: $color-green-light;
}

.usa-color-green-lighter {
  background-color: $color-green-lighter;
}

.usa-color-green-lightest {
  background-color: $color-green-lightest;
}

.usa-color-primary-darkest {
  background-color: $color-primary-darkest;
}

// Color text helpers
.usa-color-text-primary-darkest {
  color: $color-primary-darkest;
}

.usa-color-text-primary-darker {
  color: $color-primary-darker;
}

.usa-color-text-primary {
  color: $color-primary;
}

.usa-color-text-green {
  color: $color-green;
}

.usajobs-img-2x-doc {
  max-width: 376px;
}

.usa-heading-alt {
  border-bottom: 1px solid $color-gray;
  padding-bottom: 0.8rem;

  &.is-deprecated {
    color: $color-gray;
  }
}

h6.usa-heading-alt {
  margin-top: 4rem;
}

.usa-typography-example-font {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .usa-font-example p {
    margin: 0;
  }
}

.usa-typography-example {
  .usa-monospace {
    font-size: 1.2rem;
    margin: {
      bottom: 3rem;
      top: 0;
    }
  }
}

.usa-monospace {
  font-family: monospace;
}

// Code snippet boxes
.usa-code-sample .usa-unstyled-list {
  @include unstyledList();
}

.usa-code-sample pre {
  font-size: 1.2rem;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background: none;
}

code[class*="language-"],
pre[class*="language-"] {
  color: $color-base;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  color: $color-primary-alt-darkest;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: $color-secondary;
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: $color-green;
}

.token.punctuation {
  color: $color-primary-alt-darkest;
}

.usa-code-sample .usa-accordion-content {
  padding: 0;
}

.usa-content p:not(.usa-font-lead),
.usa-content ul:not(.usa-accordion):not(.usa-accordion-bordered),
.usa-content ol:not(.usa-accordion):not(.usa-accordion-bordered) {
  max-width: inherit;
}

.usa-code-sample pre[class*="language-"] {
  margin-top: 0;
}

.preview {
  .usa-background-dark {
    display: inline-block;
    padding: {
      left: 1em;
      right: 1em;
    }
  }
}

.alignment-example {
  border-left: 2px solid $color-primary-darker;
  padding-left: 1rem;
}

.help-text {
  border-top: 2px solid $color-primary-darker;
  color: $color-primary-darker;
  font-size: $em-base;
  padding-top: 1rem;
  text-align: center;
}

.text-tiny {
  margin: {
    bottom: 0;
    top: 5px;
  }

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

.typography-sans-intro {
  .text-huge {
    font-size: 140px;
    line-height: 1.05;
  }
  .text-tiny {
    font-size: 15px;
  }
}

.typography-serif-intro {
  .text-huge {
    font-size: 120px;
    line-height: 1.275;
  }
  .text-tiny {
    font-size: 13px;
  }
}

// Alt font styles

$font-light: 300;

@mixin font-lead-alt {
  font-size: $base-font-size;
  font-weight: $font-normal;
}

.serif-robust {
  .usa-display-alt {
    font-size: $h1-font-size;
    font-weight: $font-light;
  }

  .usa-font-lead {
    font-weight: $font-light;
  }

  .usa-font-lead.usa-font-lead-alt {
    @include font-lead-alt();
  }

  &.serif-body {
    .usa-font-example {
      p {
        font-family: $font-serif;
        font-size: rem(15px);
        line-height: $lead-line-height;
      }

      .usa-font-lead {
        font-size: $h3-font-size;
      }

      .usa-font-lead.usa-font-lead-alt {
        @include font-lead-alt();
      }
    }
  }
}

.sans-style {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: $font-sans;
  }

  h1 {
    font-size: rem(44px);
  }

  h2 {
    font-size: rem(34px);
  }

  h3 {
    font-size: rem(24px);
  }

  h4 {
    font-size: rem(19px);
  }

  h5 {
    font-size: rem(16px);
  }

  h6 {
    font-size: rem(13px);
  }

  .usa-display {
    font-size: rem(59px);
  }

  .usa-display-alt {
    font-size: rem(44px);
    font-weight: $font-light;
  }

  .usa-font-lead {
    font-family: $font-sans;
    font-size: rem(22px);
    font-weight: $font-light;
    line-height: $base-line-height;
  }

  &.serif-body {
    .usa-font-example {
      p {
        font-family: $font-serif;
        font-size: rem(15px);
        line-height: $lead-line-height;
      }

      .usa-font-lead {
        font-family: $font-sans;
        font-size: rem(22px);
        font-weight: $font-light;
        line-height: $base-line-height;
      }
    }
  }
}

.usa-accordion-docs {
  margin-bottom: 6rem;
}

.serif-sans-minor {
  h6 {
    font-family: $font-sans;
  }
}

// This adds styleguide-only right and left margins for our disclaimer
// Since the layout we use is not in a grid
.usa-disclaimer {
  @include contentGutter();
  font-size: 1.3rem;
}

.usa-disclaimer-official {
  display: inline-block;

  img {
    float: left;
    margin-right: 0.7rem;
    margin-top: 1px;
    width: 2rem;
  }

  p {
    display: inline-block;
    margin: 3px 0;

    @include media($SM) {
      margin: 2px 0;
    }
  }
}

.usa-disclaimer-stage {
  display: none;
  float: right;
  margin: 2px 0;

  @include media($L) {
    display: block;
  }
}

// Odd one, but the design system header is fixed and thus conflicts with our modal
.modals.is-open-modal .usa-site-header {
  display: none;
}

// For some components, like navigation we need more width to allow
// the component to behave properly
.navigation {
  .preview {
    position: relative;
    padding: 0;

    @include media($L) {
      min-width: rem(992px);
    }
  }
}

// Iconography examples --------- //
svg:not(:root).usajobs-icon--example {
  height: 2rem;
  width: 2rem;
}