@import "variables";

html {
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  margin:$baseline 0;
  font-size:$font-size;
  font-family:$font-family;
  line-height: $line-height;
  background:$background;
  color:$color;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0.8;
  }

  100% {
    opacity: 1;
  }
}

a {
  &:link {
    color:$links;
    text-decoration: none;
  }

  &:hover {
    color:$hover-links;
  }

  &:visited {
    color:$visited-links;
  }
}

h2,
h3,
h4 {
  .anchor {
    visibility: hidden;
    text-decoration: none;
    cursor: pointer;
    line-height: 1;
    color:$color;
  }

  &:hover {
    .anchor {
      visibility: visible;
      animation: fade-in 0.3s ease-in-out;
      font-family: 'FabricMDL2Icons';
    }
  }
}

pre {
  margin:$baseline 0;
  border-radius: 4px;
  padding:$baseline;
  overflow: auto;
  position: relative;

  code {
  background:transparent;
  
  &::after {
    content: attr(data-lang);
    font-style: italic;
    line-height: 1;
    opacity:0.3;
    position:absolute;
    bottom:$baseline;
    right:$baseline;
    z-index:1;
  }
  }
}

 code {
    font: $code_font;
  }

  .copy-code-button {
    font-family: 'FabricMDL2Icons';
    display:none;
    background:$background;
    border-radius: 4px;
    border:none;
    cursor: pointer;
    animation: fade-in 0.3s ease-in-out;
    font-size: $baseline;
    color:$color;
    z-index: 10;
    position:absolute;
    top:$baseline;
    right:$baseline;
  }

  pre:hover .copy-code-button {
    display: block;
  }

nav {
  position: sticky;
  height: 92vh;
  top:$baseline;
  left:$baseline;
  bottom: $baseline; 
  padding-right: $baseline;
  width: 20rem;

  img {
    width:128px;
  }

  h1 {
    margin:0;
    line-height: 1;
  }
}

#toc {
  margin-left:calc(#{$baseline} + #{$font-size});
  padding:0;
  margin:0 0 0 $baseline;
  font-size: 80%;

  li {
    color:$color;
    margin-left: $font-size;
  
  &::before {
    display: inline-block;
    content:""; 
  }

  ul {
    padding:0;
  }

}

}

main {
  display: flex;
  flex-flow: row nowrap;
  animation: fade-in 0.4s ease-in-out;
}

#release {
  text-align: left;
  margin:$baseline 0;

&::before {
  display: inline-block;
  content: "\EE2E";
  font-family: 'FabricMDL2Icons';
  margin-right:calc(#{$baseline} / 8);
}
}

@keyframes slideIn {
  0% {
   max-height:0;
   opacity:0
  }
  100% {
   max-height:999px;
   opacity:1
  }
 }
 @keyframes slideOut {
  0% {
   height:auto;
   opacity:1
  }
  100% {
   height:0;
   opacity:0
  }
 }

 nav label {
  display:block;
 }

 #trees {
  overflow-y: auto;
  height: 80%;
 }

 .subtree {
  overflow:hidden;
  margin:calc(#{$baseline} / 8) 0;
  transition: overflow 0.2s ease-in-out;
  padding: 0;
 }

 .tree-toggle-label {
  user-select:none;
  cursor:pointer; 
 }

 .tree-toggle-label::before {
  display:inline-block;
  content:"\E970";
  font-family:'FabricMDL2Icons';
  font-size:.75rem;
  transform:rotate(0deg);
  transform-origin:50% 50% 0px;
  transition:transform 0.1s linear 0s;
  margin-right: 2px;
 }


 .tree-toggle {
  position:absolute;
  opacity:0;
  z-index:-1;
 }

 .tree-toggle:checked+.tree-toggle-label::before {
  content:"\E970";
  font-family:'FabricMDL2Icons';
  font-size:.75rem;
  transform:rotate(90deg);
  transform-origin:50% 50% 0px;
  transition:transform 0.1s linear 0s;
  margin-right: 2px;
 }

 .tree-toggle:checked+.tree-toggle-label {
  font-weight:bold;
 }

 .tree-toggle+.tree-toggle-label+.subtree {
  animation-name:slideOut;
  animation-duration:0.25s;
  animation-fill-mode:both;
 }

 .tree-toggle:checked+.tree-toggle-label+.subtree {
  animation-name:slideIn;
  animation-duration:0.25s;
  animation-fill-mode:both;
 }
 

 .subtree li {
  list-style-type: none;
  margin-left: $baseline;
 

  a {
    color:$color;
  }

  &::before {
    content: "\E7C3";
    font-family:'FabricMDL2Icons';
    font-size:0.75rem;
  }

}

.active a {
  font-weight: bold;
}


article {
 width: calc(100% - (#{$baseline} * 4 + 20rem));
 margin-left:calc(#{$baseline} * 2);

 img {
   max-width:100%;
 }

}

#mobile {
  display: none;
}


@media screen and (max-width: 1023px) { 

  main {
    flex-flow: column nowrap;
    width: 100%;
  }

  nav {
    position: inherit;
    height:auto;
    margin:$baseline $baseline 0 $baseline;
  }

  article {
    width: calc(100% - (#{$baseline} * 2));
    margin:0 $baseline;
    z-index:1;
  }

  #mobile {
    font-family: 'FabricMDL2Icons';
    cursor: pointer;
    font-size: $baseline;
    margin:0 $baseline 0 0;
    display: block;
    color:$color;
  }

  #trees {
    display: none;
    position:absolute;
    background: $background;
    height:auto;
    width:100vw;
    z-index:10;
    box-shadow: 0 2px 0 rgba(0,0,0,.1);
  }

  #on_right {
    margin-top:$baseline;
  }
}

@import "fabric-icons-inline";
@import "search";