@import "text-contrast";
// Tonal Scale demo-tiles
// $dark01: adjust-color($base00,$lightness:-5%);
// $dark02: $base00;
// $dark03: $base01;
// $dark04: adjust-color($base01,$lightness:5%);
// $dark05: adjust-color($base01,$lightness:10%);
// $dark06: adjust-color($base01,$lightness:15%);
// $dark07: adjust-color($base01,$lightness:20%);
// $dark08: adjust-color($base01,$lightness:25%);
//
// $light08: adjust-color($base01,$lightness:30%);
// $light07: adjust-color($base01,$lightness:35%);
// $light06: adjust-color($base01,$lightness:40%);
// $light05: adjust-color($base01,$lightness:45%);
// $light04: adjust-color($base01,$lightness:50%);
// $light03: adjust-color($base01,$lightness:55%);
// $light02: adjust-color($base01,$lightness:60%);
// $light01: adjust-color($base01,$lightness:65%);

.bg-base00 { background-color: $base00; color: text-contrast($base00); }
.bg-base01 { background-color: $base01; color: text-contrast($base01); }
.bg-base02 { background-color: $base02; color: text-contrast($base02); }
.bg-base03 { background-color: $base03; color: text-contrast($base03); }
.bg-base04 { background-color: $base04; color: text-contrast($base04); }
.bg-base05 { background-color: $base05; color: text-contrast($base05); }
.bg-base06 { background-color: $base06; color: text-contrast($base06); }
.bg-base07 { background-color: $base07; color: text-contrast($base07); }
.bg-base08 { background-color: $base08; color: text-contrast($base08); }
.bg-base09 { background-color: $base09; color: text-contrast($base09); }
.bg-base0a { background-color: $base0A; color: text-contrast($base0A); }
.bg-base0b { background-color: $base0B; color: text-contrast($base0B); }
.bg-base0c { background-color: $base0C; color: text-contrast($base0C); }
.bg-base0d { background-color: $base0D; color: text-contrast($base0D); }
.bg-base0e { background-color: $base0E; color: text-contrast($base0E); }
.bg-base0f { background-color: $base0F; color: text-contrast($base0F); }

// .bg-dark01 { background-color: $dark01; color: text-contrast($dark01); }
// .bg-dark02 { background-color: $dark02; color: text-contrast($dark02); }
// .bg-dark03 { background-color: $dark03; color: text-contrast($dark03); }
// .bg-dark04 { background-color: $dark04; color: text-contrast($dark04); }
// .bg-dark05 { background-color: $dark05; color: text-contrast($dark05); }
// .bg-dark06 { background-color: $dark06; color: text-contrast($dark06); }
// .bg-dark07 { background-color: $dark07; color: text-contrast($dark07); }
// .bg-dark08 { background-color: $dark08; color: text-contrast($dark08); }
//
// .bg-light01 { background-color: $light01; color: text-contrast($light01); }
// .bg-light02 { background-color: $light02; color: text-contrast($light02); }
// .bg-light03 { background-color: $light03; color: text-contrast($light03); }
// .bg-light04 { background-color: $light04; color: text-contrast($light04); }
// .bg-light05 { background-color: $light05; color: text-contrast($light05); }
// .bg-light06 { background-color: $light06; color: text-contrast($light06); }
// .bg-light07 { background-color: $light07; color: text-contrast($light07); }
// .bg-light08 { background-color: $light08; color: text-contrast($light08); }
//
// generic demo styles
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-family: sans-serif;
  font-size: 16px;
}

html,
body {
  height: 100%;
  background-color: adjust-color($base00, $saturation: -5%, $lightness: -5%);
}

.bg-light,
.bg-light body {
  background-color: adjust-color($base06, $lightness: 10%);
}

body {
  margin: 0;
  font: 100%/1.5 AvenirNext-Regular, "Lucida Grande", "Segoe Ui", "Trebuchet Ms", sans-serif;
  background: inherit;
  color: #111;
  min-height: 100%;
  box-sizing: border-box;
}

h1, h2, h3 {
  margin: 0;
  padding: 1rem 0 0;
  font-family: AvenirNextCondensed-DemiBold, "Lucida Grande", "Segoe Ui", "Trebuchet Ms", sans-serif;
}

h3 {
  color: $base02;
}

.container {
  max-width: 100%;
}

.header,
.footer,
.nav_list a {
  background: $base02;
  color: $base07;
}

.bg-light .header,
.bg-light .footer,
.bg-light .nav_list a {
  background: $base0F;
}

.header,
.footer {
  padding: .5em 0;
  width: 100%;
  text-align: center;
  text-shadow: $base00 1px 1px 1px;
}


.header {
  border-bottom: 2px solid $base02;
  letter-spacing: 1px;
  word-spacing: -1px;
}

.bg-light .header {
  border-bottom-color: $base0F;
}

.footer {
  margin-top: 5em;
  border-top: 2px solid $base02;
  padding: 1.5em 0 2em;
  letter-spacing: 1px;
  word-spacing: -1px;
}

.header a,
.footer a {
  color: $base0C;
  text-decoration: none;
}

.header a:hover,
.footer a:hover {
  color: $base0D;
}

.bg-light .header a,
.bg-light .footer a {
  color: adjust-color($base0C, $lightness: 20%);
}

.bg-light .header a:hover,
.bg-light .footer a:hover {
  color: adjust-color($base0C, $saturation: 5%, $lightness: 10%);
}

.header h1 .small {
  color: $base07;
}

// nav
.nav,
.nav_list {
  min-height: 2.9em;
}

.nav {
  overflow: auto;
  clear: both;
  transition: all .3s;
  position: relative;
  padding-top: 3em;

  @media (min-width: 1330px) {
    padding-top: 0;
  }
}

.nav-closed {
  max-height: 0;
  overflow: hidden;
}

.nav-open {
  max-height: 40em;
}

.nav_list {
  display: flex;
  justify-content: flex-end;
  list-style: none;
  flex-direction: column;
  @media (min-width: 1330px) {
    flex-direction: row;
  }
}

.nav_list li {
  margin-left: 2px;
  align-self: stretch;
  flex-basis: 50px;
  @media (min-width: 1330px) {
    flex-basis: initial;
  }
}

.nav_list a {
  text-decoration: none;
  padding: .75em 1em;
  letter-spacing: 1px;
  display: flex;
  border: 1px solid transparent;
  border-top-color: adjust-color($base04, $lightness: 10%);
  border-bottom-color: $base01;
  &:hover {
  background: $base03;
  }

  @media (min-width: 1330px) {
    border: none;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
  }
}

.bg-light .nav_list a {
  // border-top-color: adjust-color($base04, $lightness: 10%);
  border-top-color: $base05;
  border-bottom-color: $base08;
  &:hover {
  background: $base08;
  }

  @media (min-width: 1330px) {
    border: none;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
  }
}

.nav_list .current a {
  pointer-events: none;
  cursor: default;
  color: $base0C;
  // background-color: $base01;
  border-top-color: $base03;
  border-bottom-color: $base00;
  letter-spacing: 0;
}

.nav_list .current a,
.nav_toggle {
  background-color: $base01;
}

.bg-light .nav_list .current a,
.bg-light .nav_toggle {
  background-color: adjust-color($base05, $lightness: 5%);
  color: $base0A;
}

.nav_toggle {

  @media (max-width: 1330px) {
    position: absolute;
    top:0;right:0;left:0;
    padding: 1em 5%;
    color: #fff;
    text-decoration: none;
    text-align: right;
    // height: 40px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='rgb(255,255,255)'%3E%3Crect x='12' y='14' width='16' height='2'/%3E%3Crect x='12' y='20' width='16' height='2'/%3E%3Crect x='12' y='26' width='16' height='2'/%3E%3C/svg%3E");
    background-position: right center;
    background-repeat: no-repeat;
  }
}

.nav-open .nav_toggle {

  @media (max-width: 1330px) {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='36' viewBox='0 0 48 36' fill='rgb(255,255,255)'%3E%3Cpath d='M25.261,17.018l4.571,4.572l-1.367,1.297l-4.501-4.573L19.5,22.887l-1.332-1.297l4.5-4.572l-4.5-4.572l1.332-1.332 l4.464,4.608l4.501-4.608l1.367,1.332L25.261,17.018z'/%3E%3C/svg%3E");
  }
}

.nav_toggle .btn-text {
  display: inline-block;
  padding-right: 1.5em;
}

.nav_toggle,
.nav_toggle .btn-text {
  @media (min-width: 1330px) {
    display: none;
  }
}
// end menu


.demo-tiles {
  overflow: hidden;
  margin-bottom: 6em;
}

.demo-tiles.collapsed span {
  color: transparent;
}

.wrap {
  margin-top: 1em;
  padding: 0 2em;
}

.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after,
.clear {
  clear: both;
}

.unit {
  float: left;
  width: 25%;
  padding: 1em 0;
  text-align: center;
  transition: .3s all;
}

.hidden {
  width: 0;
  height: 0;
  padding: 0;
  float: none;
  opacity: 0;
}

.w-1v7 {
  width: 14.208%;
}

.demo-tiles-header {
  padding: 0 0 1em;
}

.demo-tiles-header-text {
  display: block;
  padding-top: 1em;

  @media (min-width: 1150px) {
    display: inline-block;
    padding-top: 0.125rem;
    padding-left: 1em;
  }

}

.demo-tiles-header-text b {
  color: $base0C;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2.25rem;
}

h3 {
  font-size: 2rem;
  margin: 1em 0 0 .35em;
}

.block-list {
  margin-bottom: 1em;
}

.block-list li {
  list-style: none;
  padding: .5em 1em;
}

[class*="language-"] a {
  background: transparent;
  color: inherit;
  text-decoration: none;
  pointer-events: none;
}

.col pre[class*="language-"] {
  max-height: 300px;
  border-radius: 5px;
  line-height: 1.4;
}

// webkit custom scrollbars for dark background (... mostly for horizontal on smaller screens)
// https://css-tricks.com/custom-scrollbars-in-webkit/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba($base00,0.3);
  border-radius: 2px;
  background-color: adjust-color($base00, $lightness: 2.5%);
  // background-color: $base00;
}

::-webkit-scrollbar {
  width: .75em;
  height: .75em;
  background-color: adjust-color($base00, $lightness: -5%);
}

::-webkit-scrollbar-thumb {
  border-radius: 2px;
  box-shadow: inset 0 0 6px rgba(black,.3);
  background-color: adjust-color($base00, $lightness: -2.5%);
}

::-webkit-scrollbar-thumb:window-inactive {
  background-color: adjust-color($base00, $lightness: -5%);
}

::-webkit-scrollbar-corner {
  background-color: $base00;
}
// light bg
.bg-light ::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba($base07,0.3);
  border-radius: 2px;
  background-color: adjust-color($base07, $lightness: 2.5%);
  // background-color: $base07;
}

.bg-light ::-webkit-scrollbar {
  width: .75em;
  height: .75em;
  background-color: adjust-color($base07, $lightness: -5%);
}

.bg-light ::-webkit-scrollbar-thumb {
  border-radius: 2px;
  box-shadow: inset 0 0 6px rgba(black,.3);
  background-color: adjust-color($base07, $lightness: -2.5%);
}

.bg-light ::-webkit-scrollbar-thumb:window-inactive {
  background-color: adjust-color($base07, $lightness: -5%);
}

.bg-light ::-webkit-scrollbar-corner {
  background-color: $base07;
}

button {
  color: inherit;
  font: inherit;
  margin: 0;
  -webkit-appearance: none;
  overflow: visible;
  border-radius: 4px;
  background-clip: padding-box;
  background-color: $base08;
  border: 1px solid;
  border-color: $base0E adjust-color($base08,$lightness:-5%) adjust-color($base08,$lightness:-10%);
  cursor: pointer;
  color: $base07;
  display: inline-block;
  outline: 0;
  overflow: visible;
  margin: 0 0 .5em .75em;
  padding: 1em 2em;
  text-shadow: $base00 0 1px 1px;
  text-decoration: none;
  vertical-align: top;
  width: auto;
  font: 1rem/1.3 AvenirNext-Regular, "Lucida Grande", "Segoe Ui", "Trebuchet Ms", sans-serif;
  letter-spacing: 1px;
  word-spacing: -1px;
}

button:focus {
  box-shadow: $base09 0 0 5px 0;
  z-index: 1;
}

button:hover {
  background-color: $base0F;
  text-decoration: none;
}

button:active {
  box-shadow: inset rgba($base00, 0.25) 0 1px 2px 0;
  border-color: adjust-color($base08,$lightness:-5%) adjust-color($base08,$lightness:-10%) adjust-color($base08,$lightness:-15%);
}

button::-moz-focus-inner, input::-moz-focus-inner, button::-webkit-focus-inner, input::-webkit-focus-inner {
  border: 0;
  padding: 0;
}

.outer {
  text-align: center;
  background-color: $base00;
  padding: 3em;
}
.inner {
  background-color: transparentize($base09,.25);
  min-height: 300px;
}

@media (min-width:750px) {

  .container {
    padding-right: 5%;
    padding-left: 5%;
  }

  .col pre[class*="language-"] {
    padding: 2em 3em;
    font-size: 16px;
  }

  h1 {
    font-size: 2.75rem;
  }

  h2 {
    font-size: 2.5rem;
  }

  h3 {
    font-size: 2.25rem;
  }

  p {
    font-size: 1.25em;
  }

  button {
    font-size: 1.25rem;
  }

}