@use 'sass:math' as math;

// Vendor USWDS -------------- //

@import 'lib/uswds/lib/bourbon';

// Core USWDS -------------- //
@import 'lib/uswds/core/defaults';
@import 'lib/uswds/core/utilities';

// Core FSA -------------- //
@import 'core/fsa.variables';
@import 'core/fsa.utilities';
@import 'core/fsa.grid-breakpointbar';

$color-annotation: $color-fsa-secondary; //  $color-fsa-red

@keyframes peekInFromAbove {
  from {
    opacity: 0;
    transform: translateY(-200%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}

:root {
  --grid-demo-columns: #{$fsa-grid-columns};
  --grid-demo-gutter: #{$fsa-grid-gutter};
  --grid-demo-bgcolor: #{transparentize($color-fsa-aqua, .92)};
  --grid-demo-repeating-width: math.div(100%, var(--grid-demo-columns));
  --grid-demo-column-width: ( math.div(100%, var(--grid-demo-columns) ) - var(--grid-demo-gutter));
  --grid-demo-background-width: (100% + var(--grid-demo-gutter));
  --grid-demo-background-columns: repeating-linear-gradient(
    to right,
    var(--grid-demo-bgcolor),
    var(--grid-demo-bgcolor) var(--grid-demo-column-width),
    transparent var(--grid-demo-column-width),
    transparent var(--grid-demo-repeating-width)
  );
}

.docs {

  // -----------------------------------------------------------------------------
  // Doc Titles

  &__title {

    margin: 0;
    margin-top: 20vh;
    color: $color-fsa-white;
    font-weight: $font-light;

    @include breakpoint(M) {
      @include font-size(7);
    }

    &__version {
      font-size: 66%;
      color: $color-fsa-primary-200;
    }

  }

  &__anchor {

    display: none;

    @include breakpoint(L) {

      display: block;
      float: left;
      text-align: right;
      width: $size-large;
      margin-left: -$size-large;
      padding-left: $size-small;
      padding-right: $size-small;
      opacity: 0;

      &:link,
      &:visited {
        text-decoration: none;
        color: $color-fsa-link;
      }

      &:focus,
      &:active,
      &:hover {
        opacity: 1;
        color: $color-fsa-link-hover;
      }

      &:focus {
        outline-offset: -4px;
      }

      .docs__figure:hover &,
      .docs__figure-group:hover & {
        opacity: 1;
      }

    }

  }

  &__figure-group {
    margin-top: $size-large;
    border-bottom: 2px solid $color-fsa-tertiary-300;
  }

  &__figure {

    border-bottom: 1px solid $color-fsa-tertiary-300;
    margin-bottom: $size-medium;
    margin-top: $size-large;

    .docs__figure-group + & {

      // margin-top: $size-large;

    }

  }

  &__sub_style {
    // @include font-size(1);
    // font-family: $font-sans;
    // font-weight: $font-bold;
    margin-top: $size-medium;
    // color: $color-annotation;
  }

  // -----------------------------------------------------------------------------
  // Overview

  &__overview {
    background-color: $color-fsa-tertiary-100;
    padding-bottom: $size-large;
    margin-bottom: $size-medium;
    border-bottom: 1px solid $color-fsa-tertiary-200;
  }

  // -----------------------------------------------------------------------------
  // Nav

  &__nav {

    &--fixed {

      @include breakpoint(L) {

        @include position(fixed, 0px 0px 0 0px); // scss-lint:disable ZeroUnit
        box-shadow: $shadow-size-overlay ;
        margin: 0;
        background-color: $color-fsa-primary-900;
        color: $color-white;
        z-index: 1002;
        padding-top: $size-default;
        animation: peekInFromAbove 300ms ease-in-out;

        @media print {
          position: static;
        }

      }

    }

  }

  &__primary-nav {

    @include reset-ul();
    max-width: $site-max-width;
    margin-left: auto;
    margin-right: auto;

    @include breakpoint(M) {
      margin-bottom: $size-default;
      display: flex;
      align-items: baseline;
    }

    &:before {
      display: none;
      @include breakpoint(M) {
        display: block;
        content: attr(data-title);
        font-size: 28px;
        opacity: 0;
        color: rgba(255, 255, 255, .8);
        display: block;
        width: 1px;
        overflow: hidden;
        white-space: nowrap;
        transition: all .125s ease-in-out;
        line-height: $line-height-flat;
        font-weight: $font-light;
        margin-left: -1px;
      }
      .docs__nav--fixed & {
        @include breakpoint(M) {
          opacity: 1;
          width: 110px;
          border-right: 1px solid rgba(255, 255, 255, .4);
          padding-right: ($size-default + $size-base);
          margin-left: 0;
          margin-right: ($size-default + $size-base);
          transition-duration: .4s;
        }
      }
    }

    @media print {
      max-width: none;
    }

    &-item {

      @include reset-li();
      display: inline-block;
      position: relative;
      white-space: nowrap;

      @include breakpoint(L) {
        &:not(:last-child) {
          margin-right: $size-base;
        }
      }

      // scss-lint:disable NestingDepth
      &--floater {

        position: absolute;
        top: $size-default;
        right: $size-default;

        @include breakpoint(M) {
          position: static;
          margin-left: auto;
        }

      }

    }

    &-link {

      @include font-size(1);
      display: inline-block;
      margin-right: $size-small;
      text-decoration: none;
      color: $color-fsa-white;

      @include breakpoint(M) {
        @include font-size(3);
        margin-right: $size-small;
        &:only-child {
          margin-right: initial;
        }
      }

      &--sub {
        @include breakpoint(L) {
          &:after {
            $size: $size-default;
            content : '';
            display: inline-block;
            margin-left: $size-base + math.div($size-base, 2);
            width: $size;
            height: ($size + .2rem);
            background-image: url('#{$image-path}/angle-arrow-down-hover.png');
            background-image: url('#{$image-path}/angle-arrow-down-hover.svg');
            background-size: 100%;
            background-repeat: no-repeat;
            position: relative;
            top: 3px;
          }
          _:-ms-fullscreen, :root &:after {
            // IE 11 doesn't support :focus-within, so let's just suppress it
            display: none;
          }
        }
      }

      // scss-lint:disable NestingDepth
      &:hover {
        text-decoration: underline;
      }

      &:active,
      &:hover,
      &:hover:visited,
      &:visited {
        color: $color-fsa-white;
      }

      &::focus {
        z-index: 1;
      }

    }

    &-sub {

      display: none;

      @include breakpoint(L) {

        @include reset-ul();
        display: none;
        margin: 0;
        position: absolute;
        z-index: 2;
        left: -$size-default;
        top: 100%;
        background-color: $color-fsa-primary-900;
        max-height: 50vh;
        border-top: 1em solid $color-fsa-primary;
        padding-top: $size-base;
        padding-bottom: $size-small;
        overflow: auto;
        box-shadow: $shadow-size-overlay;

        .docs__nav--fixed & {
          max-height: 95vh; // CDH FIX prev... (100vh - 42px)
          border-top-color: $color-fsa-primary-900;
        }

        .docs__primary-nav-item--sub:focus-within &,
        .docs__primary-nav-item--sub:hover & {
          display: block;
        }

      }

    }

    &-sub-item {
      @include breakpoint(L) {
        @include reset-li();
      }
    }

    &-sub-link {

      display: block;
      color: white;
      text-decoration: none;
      padding: $size-base $size-default;

      &:active,
      &:hover,
      &:hover:visited,
      &:visited {
        color: $color-fsa-white;
      }

      &:hover {
        text-decoration: underline;
      }

      &:focus {
        outline-offset: -3px;
      }

      &--category {

        @include font-size(2);
        background-color: rgba(255, 255, 255, .1);
        margin-top: $size-base;
        margin-bottom: $size-base;
        font-weight: $font-bold;
        text-transform: uppercase;

        &:hover {
          text-decoration: none;
        }

      }

    }

    &__icon {
      display: inline-block;
      vertical-align: middle;
      margin-right: $size-small;
    }

  }

  // -----------------------------------------------------------------------------
  // Structure

  &__page {} // scss-lint:disable EmptyRule

  &__section {
    @include fudgeMargin();
    padding-right: $size-default;
    padding-left: $size-default;
  }

  &__section-title {
    position: relative;
  }

  &__section-link {

    position: absolute;
    right: 0;
    top: 0;
    text-transform: uppercase;

    .docs__figure + & {
      top: -($size-default);
    }

    @media print {

      @include font-size(3);
      color: black !important;
      position: static;
      margin-top: $size-default;
      background-color: transparent;
      padding: 0;
      border-width: 0;
      outline: 0;
      font-weight: $font-bold;

      &:after {
        content: ': ' attr(href);
        text-transform: initial;
        font-family: $font-mono;
      }
    }

  }

  &__intro {
    position: relative;
    padding-top: $size-medium;
    padding-bottom: $size-medium;
    background-color: $color-fsa-primary;
    margin-bottom: $size-medium;
    @include breakpoint(M) {
      position: static;
    }
  }

  &__bd {

    max-width: $site-max-width;
    margin-left: auto;
    margin-right: auto;

    @media print {
      max-width: none;
    }

  }

  &__main {} // scss-lint:disable EmptyRule

  &__jump-target {
    @include fudgeMargin();
  }

  // -----------------------------------------------------------------------------
  // Logo

  &__logo {

    @include checkerboard();

    padding: ($size-base * 7);

    @include breakpoint(M) {
      padding: ($size-base * 15);
    }

    &__demo {
      display: block;
    }

  }

  // -----------------------------------------------------------------------------
  // Attribute List

  &__attr-list {

    @include reset-ul();

    margin-bottom: $size-medium;

    @include breakpoint(M) {
      display: flex;
    }

    &--spaced {
      margin-right: -$size-medium;
    }

    &__item {

      @include reset-li();
      flex: 1;

      @include breakpoint(M) {
        margin-right: $fsa-grid-gutter;
      }

      &:last-child {

        @include breakpoint(M) {
          margin-right: 0;
        }

      }

    }

    &__swatch {
      height: ($size-base * 18);
      display: flex;
      border-radius: $radius-m;
    }

    &__title {
      @include font-size(3);
      color: $color-annotation;
    }

    &__attr {

      @include reset-ul;
      margin: $size-small 0 $size-default;

      // scss-lint:disable NestingDepth
      &-item {
        @include reset-li;
      }

    }

  }

  &__swatch-list {

    @include reset-ul;
    margin-bottom: $size-default;

    &__item {

      @include reset-li;
      padding: $size-extra-large $size-default $size-default;

      &:first-child {
        border-top-left-radius: $radius-m;
        border-top-right-radius: $radius-m;
      }
      &:last-child {
        border-bottom-left-radius: $radius-m;
        border-bottom-right-radius: $radius-m;
      }

      // scss-lint:disable NestingDepth
      &--main {
        padding-top: $size-extra-large * 2;
      }

      code {
        background-color: transparent;
        padding: 0;
        border-width: 0;
        color: white;
      }


    }

    &__value {
      @include font-size(0);
      display: block;
    }

  }

  // -----------------------------------------------------------------------------
  // Typography

  &__font {

    display: flex;
    align-items: center;
    margin-bottom: $size-medium;

    &--source-sans-pro {

      font-family: $font-sans;
      font-weight: $font-normal;
      outline: 1px solid blue;

      // scss-lint:disable NestingDepth
      &-light {
        font-weight: $font-light;
        outline: 1px solid green;
      }

      &-bold {
        font-weight: $font-bold;
        outline: 1px solid red;
      }

    }

    &--merriweather {

      outline: 3px solid red;
      background-color: yellow ;

    }

    &--helvetica {

      font-family: $helvetica;

    }

    &--georgia {

      font-family: $georgia;
      outline: 3px solid red;
      background-color: yellow;

    }

    &__preview {

      @include font-size(7);
      flex: 1;
      line-height: $line-height-flat;
      margin: 0;
      margin-right: $size-default;

      @include breakpoint(S) {
        font-size: ($size-base * 18);
        text-align: center;
      }

    }

    &__details {
      flex: 2;
      overflow: hidden;
    }

    &__item {
      @include fsa-ellipsis();
      margin: 0;
      letter-spacing: $size-base;
    }

  }


  // -----------------------------------------------------------------------------
  // Grid Demo

  &__grid-inventory {

    & {
      background-image: var(--grid-demo-background-columns);
      background-size: var(--grid-demo-background-width) 100%;
    }

    & & {
      --grid-demo-bgcolor-nest: #{tint($color-fsa-aqua, 75%)};
      --grid-demo-background-columns-nest: repeating-linear-gradient(
        to right,
        var(--grid-demo-bgcolor-nest),
        var(--grid-demo-bgcolor-nest) var(--grid-demo-column-width),
        transparent var(--grid-demo-column-width),
        transparent var(--grid-demo-repeating-width)
      );

      background-image: var(--grid-demo-background-columns-nest);

    }

  }

  // -----------------------------------------------------------------------------
  // Utilities

  &__utilities {

    &__demo {
      @include checkerboard();
      margin-bottom: $size-default;
    }

    &__demo-item {

      border: 1px solid $color-fsa-tertiary-300;

      code {

        background-color: white;
        border-width: 0;
        padding: 0;
        display: block;

      }

    }

  }

  &__code-sample {} // scss-lint:disable EmptyRule

  &__footer {

    @include font-size(2);
    margin-top: $size-large;
    background-color: $color-fsa-tertiary-100;

    a {
      text-decoration: underline;
    }

    &:before {
      display: none;
    }

    &__bd {
      padding: $size-medium 0;
    }

  }

  &__vis-demo-hidden {
    filter: grayscale(100);
    opacity: .5;
    outline: 3px dotted rgba(0,0,0,.1);
    outline-offset: 2px;
  }

  &__color-utilities {

    $nudge: $size-default;
    margin-left: -$nudge;
    margin-right: -$nudge;
    padding: $nudge;

    &.fsa-bg--tertiary-900 .docs__sub_style {
      color: $color-fsa-tertiary-200
    }

  }

  // -----------------------------------------------------------------------------
  // Icon Grid

  &__icons {
    & {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      @include breakpoint(S) {
        grid-template-columns: repeat(3, 1fr);
      }
      @include breakpoint(M) {
        grid-template-columns: repeat(4, 1fr);
      }
      @include breakpoint(L) {
        grid-template-columns: repeat(5, 1fr);
      }
      @include breakpoint(XL) {
        grid-template-columns: repeat(7, 1fr);
      }
    }
    & > * {
    }
    &__link {
      & {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: $size-default $size-small;
        color: inherit;
        text-decoration: none;
        border-radius: $radius-s;
        border: 1px solid transparent;
      }
      &--clicked {
        &, &:hover {
          @include font-size(2);
          border-color: $color-fsa-primary-200;
          padding: $size-default;
          justify-content: center;
          background-color: $color-fsa-primary-100;
          pointer-events: none;
          font-weight: $font-bold;
          color: $color-fsa-primary;
          text-align: center;
        }
      }
      &:visited {
        color: inherit;
      }
      &:hover {
        color: $color-fsa-link;
        background-color: $color-fsa-secondary-100;
      }
      &:active {
        border-color: $color-fsa-secondary-300;
      }
    }
    &__caption {
      @include font-size(2);
      margin-top: $size-small;
      text-align: center;
    }
  }

}

.fsa-checkerboard {
  @include checkerboard();
}

.size-swatch {

  @include checkerboard();

  margin: 0;

  &__blotch {

    background-color: $color-black;
    display: block;
    margin: auto;

    &--base {
      width: $size-base;
      height: $size-base;
    }

    &--small {
      width: $size-small;
      height: $size-small;
    }

    &--default {
      width: $size-default;
      height: $size-default;
    }

    &--medium {
      width: $size-medium;
      height: $size-medium;
    }

    &--large {
      width: $size-large;
      height: $size-large;
    }

    &--extra-large {
      width: $size-extra-large;
      height: $size-extra-large;
    }

  }

}

.color-fsa-link {
  background-color: $color-fsa-link;
}

.docs__rwd-demo-block {
  display: none;
  text-align: center;

  h2[id] + & {
    margin-top: -15px;
    border-top: 0;
  }

  @include breakpoint(L)   {
    display: block;
  }
}

.docs__rwd-embed-container {
  padding: $size-medium $size-default;
  background-color: white;
  border: 1px solid $color-fsa-tertiary-200;
}

.docs__rwd-embed {
  & {
    will-change: auto;
    transition: all .23s ease-in-out;
    border: $size-base solid shade($color-fsa-tertiary-100,2%);
    margin: auto;
    margin-top: $size-medium;
    position: relative;
  }
  &--phone {
    width: 340px;
    height: 580px;
    border-radius: $size-medium;
    border-width: $size-large $size-small;
  }
  &--phone-big {
    height: 330px;
    width: 580px;
    border-radius: $size-medium;
    border-width: $size-small $size-large;
  }
  &--tablet {
    width: 820px;
    height: 1000px;
    border-radius: $size-medium;
    border-width: $size-large;
  }
  &--desktop {
    width: 1187px;
    height: 50vh;
    border-top-width: $size-extra-large;
    &:before {
      @include font-size(7);
      content:
        url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjAgMTFINy44M2w1LjU5LTUuNTlMMTIgNGwtOCA4IDggOCAxLjQxLTEuNDFMNy44MyAxM0gyMHYtMnoiPjwvcGF0aD48L3N2Zz4=)
        ' '
        url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgNGwtMS40MSAxLjQxTDE2LjE3IDExSDR2MmgxMi4xN2wtNS41OCA1LjU5TDEyIDIwbDgtOHoiLz48L3N2Zz4=)
        ' '
        url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTcuNjUgNi4zNUMxNi4yIDQuOSAxNC4yMSA0IDEyIDRjLTQuNDIgMC03Ljk5IDMuNTgtNy45OSA4czMuNTcgOCA3Ljk5IDhjMy43MyAwIDYuODQtMi41NSA3LjczLTZoLTIuMDhjLS44MiAyLjMzLTMuMDQgNC01LjY1IDQtMy4zMSAwLTYtMi42OS02LTZzMi42OS02IDYtNmMxLjY2IDAgMy4xNC42OSA0LjIyIDEuNzhMMTMgMTFoN1Y0bC0yLjM1IDIuMzV6Ij48L3BhdGg+PC9zdmc+)
        ' '
        url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTAgMjB2LTZoNHY2aDV2LThoM0wxMiAzIDIgMTJoM3Y4eiI+PC9wYXRoPjwvc3ZnPg==)
      ;
      top: -55px; // magic number
      left: $size-small;
      position: absolute;
      line-height: $line-height-flat;
    }
    &:after {
      content: '';
      position: absolute;
      top: -35px;
      right: $size-small;
      height: $size-medium;
      width: calc(100% - 158px);  // magic number
      background-color: $color-fsa-base-bg;
    }
  }
  &--fullscreen {
    & {
      position: fixed;
      z-index: 1003;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: 0;
      border: 0;
    }
    &:before,
    &:after {
      display: none;
    }
  }
}

.docs__rwd-embed-close {
  display: none;
  .docs__rwd-embed--fullscreen & {
    display: flex;
    position: absolute;
    right: 24px;
    top: 12px;
  }
}

.docs__rwd-iframe {
  display: block;
  width: 100%;
  height: 100%;
}

[class*="docs-highlight"] {
  text-decoration: line-through;
  text-decoration-color: black;
}

.docs-highlight {

  $thisBGC: transparentize($color-fsa-yellow, .7);

  background-color: $thisBGC;
  text-decoration: none;

  &\@xs {
    &,
    &-only {
      @include breakpoint(S, down)   { background-color: $thisBGC; text-decoration: none; }
    }
  }
  &\@s {
    @include breakpoint(S)   { background-color: $thisBGC; text-decoration: none; }
    &-only {
      @media screen and (max-width: $screen-m) and (min-width: $screen-s) { background-color: $thisBGC; text-decoration: none; }
    }
  }
  &\@m {
    @include breakpoint(M)   { background-color: $thisBGC; text-decoration: none; }
    &-only {
      @media screen and (max-width: $screen-l) and (min-width: $screen-m) { background-color: $thisBGC; text-decoration: none; }
    }
  }
  &\@l {
    @include breakpoint(L)   { background-color: $thisBGC; text-decoration: none; }
    &-only {
      @media screen and (max-width: $screen-xl) and (min-width: $screen-l) { background-color: $thisBGC; text-decoration: none; }
    }
  }
  &\@xl {
    &,
    &-only {
      @include breakpoint(XL)   { background-color: $thisBGC; text-decoration: none; }
    }
  }

}

.docs__rwd-demo-icon {

  $thisWIDTH: 11px;
  $thisHEIGHT: 18px;

  border: solid $color-fsa-secondary;
  border-width: 3px 1px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  border-radius: 2px;
  width: $thisWIDTH;
  height: $thisHEIGHT;
  // background-color: transparent;
  margin-left: $size-base;
  margin-top: -2px;

  // .fsa-btn-group__item:focus &,
  .fsa-btn-group__item--active:hover &,
  .fsa-btn-group__item:active:hover & {
    border-color: white;
  }

  &--portrait {
    width: $thisWIDTH;
    height: $thisHEIGHT;
  }

  &--landscape {
    border-width: 1px 3px;
    width: ($thisHEIGHT + 1px);
    height: ($thisWIDTH + 1px);
  }

}