@charset "utf-8";
@import "normalize";
@import "variables";
@import "icon-font";

/*
Copyright (c) 2017-2023 Individual contributors to center-key/node-slate
Copyright (c) 2015 SD Elements, Inc.
Copyright (c) 2008-2013 Concur Technologies, Inc.

Licensed under the Apache License, Version 2.0 (the "License"); you may
not use this file except in compliance with the License. You may obtain
a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations
under the License.
*/

////////////////////////////////////////////////////////////////////////////////
// GENERAL STUFF
////////////////////////////////////////////////////////////////////////////////

html, body {
   color: $main-text;
   padding: 0px;
   margin: 0px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   @extend %default-font;
   background-color: $main-bg;
   height: 100%;
   -webkit-text-size-adjust: none; /* Never autoresize text */
   }

////////////////////////////////////////////////////////////////////////////////
// TABLE OF CONTENTS
////////////////////////////////////////////////////////////////////////////////

#toc > ul > li > a > span {
   float: right;
   background-color: #2484FF;
   border-radius: 40px;
   width: 20px;
   }

@mixin embossed-bg {
   background:
      linear-gradient(to bottom, rgba(black, 0.2), rgba(black, 0) 8px),
      linear-gradient(to top, rgba(black, 0.2), rgba(black, 0) 8px),
      linear-gradient(to bottom, rgba($nav-embossed-border-top, 1), rgba($nav-embossed-border-top, 0) 1.5px),
      linear-gradient(to top, rgba($nav-embossed-border-bottom, 1), rgba($nav-embossed-border-bottom, 0) 1.5px),
      $nav-subitem-bg;
   }

.tocify-wrapper {
   transition: left 0.3s ease-in-out;
   overflow-y: auto;
   overflow-x: hidden;
   position: fixed;
   z-index: 30;
   top: 0px;
   left: 0px;
   bottom: 0px;
   width: $nav-width;
   background-color: $nav-bg;
   font-size: 13px;
   font-weight: bold;
   .lang-selector {  //language selector for mobile devices
      display: none;
      a {
         padding-top: 0.5em;
         padding-bottom: 0.5em;
         }
      }
   &>img {  //logo at the top of the ToC
      display: block;
      max-width: 80%;
      max-height: 100px;
      margin: $logo-margin auto 0px auto;
      }
   &>.search {
      position: relative;
      input {
         background: $nav-bg;
         border-width: 0px 0px 1px 0px;
         border-color: $search-box-border-color;
         padding: 6px 0px 6px 20px;
         box-sizing: border-box;
         margin: $nav-v-padding $nav-padding;
         width: $nav-width - 30;
         outline: none;
         color: $nav-text;
         border-radius: 0px;  //ios has a default border radius
         }
      &::before {
         position: absolute;
         top: 17px;
         left: $nav-padding;
         color: $nav-text;
         @extend %icon-search;
         }
      }
   img+.tocify {
      margin-top: $logo-margin;
      }
   .search-results {
      margin-top: 0;
      box-sizing: border-box;
      height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      transition-property: height, margin;
      transition-duration: 180ms;
      transition-timing-function: ease-in-out;
      &.visible {
         height: 30%;
         margin-bottom: 1em;
         }
      @include embossed-bg;
      li {
         margin: 1em $nav-padding;
         line-height: 1;
         }
      a {
         color: $nav-text;
         text-decoration: none;
         &:hover {
            text-decoration: underline;
            }
         }
      }
   .tocify-item>a, .toc-footer li {
      padding: 0px $nav-padding 0px $nav-padding;
      display: block;
      overflow-x: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      }
   // The Table of Contents is composed of multiple nested
   // unordered lists.   These styles remove the default
   // styling of an unordered list because it is ugly.
   ul, li {
      list-style: none;
      margin: 0px;
      padding: 0px;
      line-height: 28px;
      }
   li {
      color: $nav-text;
      transition: background-color 230ms linear;
      }
   .tocify-focus {  //currently selected ToC entry
      box-shadow: 0px 1px 0px $nav-active-shadow;
      background-color: $nav-active-bg;
      color: $nav-active-text;
      }
   // Subheaders are the submenus that slide open in the table of contents.
   .tocify-subheader {
      display: none;  //tocify will override this when needed
      background-color: $nav-subitem-bg;
      font-weight: 500;
      .tocify-item>a {
         padding-left: $nav-padding + $nav-indent;
         font-size: 12px;
         }
      // Embossed look:
      @include embossed-bg;
      &>li:last-child {
         box-shadow: none;  //otherwise it'll overflow out of the subheader
         }
      }
   .toc-footer {
      padding: 1em 0px;
      margin-top: 1em;
      border-top: 1px dashed $nav-footer-border-color;
      li,a {
         color: $nav-text;
         text-decoration: none;
         }
      a:hover {
         text-decoration: underline;
         }
      li {
         font-size: 0.8em;
         line-height: 1.7;
         text-decoration: none;
         }
      }
   }

// button to show navigation on mobile devices
#nav-button {
   span {
      display: block;
      // $side-pad: $main-padding / 2 - 8px;
      // $side-pad: math.div($main-padding, 2) - 8px;
      $side-pad: 14px - 8px;
      padding: $side-pad $side-pad $side-pad;
      background-color: rgba($main-bg, 0.7);
      transform-origin: 0 0;
      transform: rotate(-90deg) translate(-100%, 0);
      border-radius: 0 0 0 5px;
      }
   padding: 0px 1.5em 5em 0px;  //increase touch size area
   display: none;
   position: fixed;
   top: 0px;
   left: 0px;
   z-index: 100;
   color: black;
   text-decoration: none;
   font-weight: bold;
   opacity: 0.7;
   line-height: 16px;
   img {
      height: 16px;
      vertical-align: bottom;
      }
   transition: left 0.3s ease-in-out;
   &:hover { opacity: 1; }
   &.open {left: $nav-width}
   }

////////////////////////////////////////////////////////////////////////////////
// PAGE LAYOUT AND CODE SAMPLE BACKGROUND
////////////////////////////////////////////////////////////////////////////////

.page-wrapper {
   margin-left: $nav-width;
   position: relative;
   z-index: 10;
   background-color: $main-bg;
   min-height: 100%;
   padding-bottom: 1px;  //prevent margin overflow
   // The dark box is what gives the code samples their dark background.
   // It sits essentially under the actual content block, which has a
   // transparent background.
   // I know, it's hackish, but it's the simplist way to make the left
   // half of the content always this background color.
   .dark-box {
      width: $examples-width;
      background-color: $examples-bg;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      }
   .lang-selector {
      position: fixed;
      z-index: 50;
      border-bottom: 5px solid $lang-select-active-bg;
      }
   }

.lang-selector {
   background-color: $lang-select-bg;
   width: 100%;
   font-weight: bold;
   a {
      display: block;
      float:left;
      color: $lang-select-text;
      text-decoration: none;
      padding: 0 10px;
      line-height: 30px;
      outline: 0;
      &:active, &:focus {
         background-color: $lang-select-pressed-bg;
         color: $lang-select-pressed-text;
         }
      &.active {
         background-color: $lang-select-active-bg;
         color: $lang-select-active-text;
         }
      }
   &::after {
      content: '';
      clear: both;
      display: block;
      }
   }

////////////////////////////////////////////////////////////////////////////////
// CONTENT STYLES
////////////////////////////////////////////////////////////////////////////////
// This is all the stuff with the light background in the left half of the page

.content {
   // Place content above the dark box
   position: relative;
   z-index: 30;
   &::after {
      content: '';
      display: block;
      clear: both;
      }
   &>h1, &>h2, &>h3, &>h4, &>h5, &>h6, &>p, &>table, &>ul, &>ol, &>aside, &>dl {
      margin-right: $examples-width;
      padding: 0 $main-padding;
      box-sizing: border-box;
      display: block;
      text-shadow: $main-embossed-text-shadow;
      @extend %left-col;
      }
   &>ul, &>ol {
      padding-left: $main-padding + 15px;
      }
   &>h1, &>h2, &>div {  //tocify hidden div for placeholding stuff
      clear:both;
      }
   h1 {
      @extend %header-font;
      font-size: 30px;
      padding-top: 0.5em;
      padding-bottom: 0.5em;
      border-bottom: 1px solid lightgray;
      margin-bottom: $h1-margin-bottom;
      margin-top: 2em;
      border-top: 1px solid #ddd;
      background-image: linear-gradient(to bottom, white, whitesmoke);
      }
   h1:first-child, div:first-child + h1 {
      border-top-width: 0px;
      margin-top: 0px;
      }
   h2 {
      @extend %header-font;
      font-size: 20px;
      margin-top: 4em;
      margin-bottom: 0px;
      border-top: 1px solid lightgray;
      padding-top: 1.2em;
      padding-bottom: 1.2em;
      background-image: linear-gradient(to bottom, rgba(white, 0.4), rgba(white, 0));
      }
   // h2s right after h1s should bump right up against the h1s.
   h1 + h2, h1 + div + h2 {
      margin-top: $h1-margin-bottom * -1;
      border-top: none;
      }
   h3, h4, h5, h6 {
      @extend %header-font;
      font-size: 15px;
      margin-top: 2.5em;
      margin-bottom: 0.8em;
      }
   h4, h5, h6 {
      font-size: 10px;
      }
   hr {
      margin: 2em 0px;
      border-top: 2px solid $examples-bg;
      border-bottom: 2px solid $main-bg;
      }
   table {
      margin-bottom: 1em;
      overflow: auto;
      th,td {
         text-align: left;
         vertical-align: top;
         line-height: 1.6;
         }
      th {
         padding: 5px 10px;
         border-bottom: 1px solid lightgray;
         vertical-align: bottom;
         }
      td {
         padding: 10px;
         }
      tr:last-child {
         border-bottom: 1px solid lightgray;
         }
      tr:nth-child(odd)>td {
         background-color: lighten($main-bg, 4.2%);
         }
      tr:nth-child(even)>td {
         background-color: lighten($main-bg, 2.4%);
         }
      }
   dt {
      font-weight: bold;
      }
   dd {
      margin-left: 15px;
      }
   p, li, dt, dd {
      line-height: 1.6;
      margin-top: 0px;
      }
   img {
      max-width: 100%;
      }
   code {
      background-color: rgba(0, 0, 0, 0.05);
      padding: 3px;
      border-radius: 3px;
      @extend %break-words;
      @extend %code-font;
      }
   pre>code.hljs {
      background-color: transparent;
      padding: 0px;
      }
   aside {
      @extend %icon-info-sign;
      padding-top: 1em;
      padding-bottom: 1em;
      text-shadow: 0px 1px 0px lighten($aside-notice-bg, 15%);
      margin-top: 1.5em;
      margin-bottom: 1.5em;
      background: $aside-notice-bg;
      line-height: 1.6;
      &.success {
         @extend %icon-ok-sign;
         background-color: $aside-success-bg;
         text-shadow: 0px 1px 0px lighten($aside-success-bg, 15%);
         }
      &.warning {
         @extend %icon-exclamation-sign;
         background-color: $aside-warning-bg;
         text-shadow: 0px 1px 0px lighten($aside-warning-bg, 15%);
         }
      &.error {
         @extend %icon-exclamation-sign;
         background-color: $aside-error-bg;
         text-shadow: 0px 1px 0px lighten($aside-error-bg, 15%);
         }
      }
   .search-highlight {
      padding: 2px;
      margin: -2px;
      border-radius: 4px;
      border: 1px solid #f7e633;
      background: linear-gradient(to top left, #f7e633 0%, #f1d32f 100%);
      }
   }

////////////////////////////////////////////////////////////////////////////////
// CODE SAMPLE STYLES
////////////////////////////////////////////////////////////////////////////////
// This is all the stuff that appears in the right half of the page

.content {
   pre, blockquote {
      @extend %right-col;
      background-color: $code-bg;
      color: white;
      margin: 0px;
      width: $examples-width;
      float: right;
      clear: right;
      box-sizing: border-box;
      text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
      &>p { margin: 0px; }
      a {
         color: white;
         text-decoration: none;
         border-bottom: dashed 1px lightgray;
         }
      }
   pre {
      @extend %code-font;
      padding: 2em $main-padding;
      }
   blockquote {
      padding: 0px;
      &>p {
         background-color: $code-annotation-bg;
         border-radius: 5px;
         padding: $code-annotation-padding $main-padding;
         color: lightgray;
         border-top: 1px solid black;
         border-bottom: 1px solid #404040;
         }
      }
   }

////////////////////////////////////////////////////////////////////////////////
// RESPONSIVE DESIGN
////////////////////////////////////////////////////////////////////////////////
// These are the styles for phones and tablets
// There are also a couple styles disperesed

@media (max-width: $tablet-width) {
   .tocify-wrapper {
      left: -$nav-width;
      &.open {
         left: 0px;
         }
      }
   .page-wrapper {
      margin-left: 0px;
      }
   #nav-button {
      display: block;
      }
   .tocify-wrapper .tocify-item > a {
      padding-top: 0.3em;
      padding-bottom: 0.3em;
      }
   }

@media (max-width: $phone-width) {
   .dark-box {
      display: none;
      }
   %left-col {
      margin-right: 0px;
      }
   .tocify-wrapper .lang-selector {
      display: block;
      }
   .page-wrapper .lang-selector {
      display: none;
      }
   %right-col {
      width: auto;
      float: none;
      }
   %right-col + %left-col {
      margin-top: $main-padding;
      }
   }

.highlight .c, .highlight .cm, .highlight .c1, .highlight .cs {
   color: gray;
   }

.highlight, .highlight .w {
   background-color: $code-bg;
   }