//                 ____  _____    _   __
//                / __ \/ ___/   / | / /__  __  _____
//               / / / /\__ \   /  |/ / _ \/ / / / _ \
//              / /_/ /___/ /  / /|  /  __/ /_/ /  __/
//             /_____//____/  /_/ |_/\___/\__,_/\___/
//
//   ==================== Styleguide Styles ====================
//
//   These are styles that are only used in the styleguide, and
//   should not be available in client applications.

@import "../node_modules/susy/sass/susy";

@import "_utilities/functions";
@import "_utilities/variables";
@import "_utilities/mixins";

// FixedSticky
.fixedsticky-dummy {
  display: none;
}

.fixedsticky-on + .fixedsticky-dummy {
  display: block;
}

// Styleguide!
main {
  @include clearfix;
}

.styleguide-navigation-toggle {
  @include media($tablet) {
    display: none;
  }
}


.styleguide-sidebar {
  padding-top: $base-spacing;

  @include media($mobile) {
    text-align: center;
    margin: ($base-spacing / 2);
    padding: $base-spacing;
    border: 1px solid $light-gray;

    .waypoints.is-hidden {
      display: none;
    }

    .waypoints ul {
      max-height: 600px;
    }
  }

  @include media($tablet) {
    @include span(4 rtl);
    position: sticky;
    top: 0;

    // Fallback for position:sticky, through Filament Group's fixed-sticky
    &.fixedsticky-on {
      position: fixed;
      width: 100%;
      max-width: 1440px;
      padding: 0;

      .waypoints {
        position: absolute;
        width: span(4);
        padding: $base-spacing gutter();
        right: 0;
        display: inline-block;
      }
    }

    &.fixedsticky-off {
      position: static;
    }
  }
}

.styleguide-content {
  @include clearfix;
  @include span(100%);
  padding-top: $base-spacing;

  @include media($tablet) {
    @include span(10);
    @include push(2);
  }

  // Override galleries in styleguide content to fit to grid.
  > .gallery {
    margin: ($base-spacing / 2) (-$base-spacing / 2);
  }
}

.styleguide-example {
  margin: $base-spacing 0 ($base-spacing * 2);
}

.styleguide-example-content {
  border-radius: $sm-border-radius;
  border: 1px solid $light-gray;
}

.styleguide-reference-link {
  color: $light-gray;

  &:hover {
    color: $med-gray;
    text-decoration: none;
  }
}

.styleguide-example > h3 em {
  float: right;
  text-transform: none;
  font-style: normal;
  font-weight: normal;
  color: $med-gray;
}

.styleguide-description {
  margin-bottom: ($base-spacing / 2);
}

.styleguide-element {
  overflow: hidden;
  position: relative;
  padding: $base-spacing;
  min-height: 75px;
}

.styleguide-element + .styleguide-element {
  border-top: 1px solid #eee;
}

.styleguide-modifier-name {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  padding: 4px ($base-spacing / 2);
  font-size: $font-smaller;
  color: $med-gray;
  background: #efefef;
  border-bottom-left-radius: $sm-border-radius;
  border-top: 0;
  z-index: 10;
}

.styleguide-html {
  display: none;
  padding: 10px 25px 10px 5px;
  background: #efefef;
  border-radius: $sm-border-radius;
  font-size: 18px;
  overflow: auto;
  margin-top: $base-spacing;
}

.hljs {
  background: transparent !important;
  display: inline !important;
  padding-right: 25px !important;
}

.styleguide-example .styleguide-html .highlight {
  background: none;
}

.styleguide-element__description {
  display: block;
  margin: 0 0 $base-spacing;

  strong {
    font-size: 90%;
    background: #eee;
    padding: 4px 8px;
    border-radius: $sm-border-radius;
  }
}

.font-tile {
  font-size: $font-large;
  margin: $base-spacing 0;
  padding: $base-spacing;
  border-radius: $sm-border-radius;
  border: 1px solid $light-gray;
}

.font-tile code {
  display: block;
  font-size: $font-smaller;
  color: $med-gray;
  font-weight: 400;
  line-height: 1.5;
  padding-top: 5px;
}

.color-tile {
  width: 100%;
  background: #eee;
  color: #fff;
  text-shadow: $text-shadow;
  padding: ($base-spacing * 2) $base-spacing;
  border-radius: 2px;

  & code {
    color: rgba(255, 255, 255, 0.7);
  }
}

.color-tile__value {
  display: block;
}

.button.button--preview {
  &:before {
    content: "\25B6";
    margin-right: ($base-spacing / 2);
  }
}

.styleguide-tip {
  &:before {
    @include icomoon-icon;
    content: "\f000 ";
    position: relative;
    top: 1px;
    padding-right: 4px;
  }
}

.styleguide-footer {
  margin-top: $section-spacing;
  margin-bottom: $section-spacing;
}

.styleguide-version {
  vertical-align: 50%;
  background: rgba(#000, 0.25);
  padding: ($base-spacing / 4) ($base-spacing / 2);
  border-radius: $lg-border-radius;
  text-shadow: none;
}

.styleguide-markuplink {
  color: $med-gray;
  font-size: $font-smaller;
  margin: 4px;

  a {
    color: $med-gray;

    &:before {
      @include icomoon-icon;
      content: "\f05f ";
      position: relative;
      top: 1px;
      padding-right: 6px;
    }

    &:hover {
      text-decoration: none;
    }
  }
}

// Specific pattern overrides
#message-callout--example---white,
#info-bar--example,
#navigation--example---white {
  background: #fff url("/styleguide/assets/pattern-dark-bg.png");
}