//
// Document style
// --------------------------------------------------


// Head navs

.heading.affix .icon-github {font-size: 1rem}


// Partial content

#partial {padding: 0}

@media (min-width: 30rem) {
  #partial {margin-top: 1rem; margin-bottom: 1rem}
}


// Misc

.avatar-xl > small {font-size: .9rem;}

.icon-5x {font-size: 3.5rem}

.path-zui-36 {
  display: inline-block;
  background-color: #fff;
  border-radius: 1.8rem;
  height: 3.6rem;
  width: 3.6rem;
  position: relative;
  overflow: hidden;
  &:before,
  &:after {
    content: ' ';
    display: block;
    position: absolute;
    border: 0.2rem solid @color-primary;
    left: 1.1rem;
    width: 1.4rem;
    height: 0.4rem;
  }
  &:before {
    top: .9rem;
    border-bottom: none;
  }
  &:after {
    top: 2.3rem;
    border-top: none;
  }
  .path-1,
  .path-2,
  .path-1:before,
  .path-1:after,
  .path-2:before {
    display: block;
    content: ' ';
    position: absolute;
    width: 0.2rem;
    height: 0.2rem;
    background-color: @color-primary;
  }
  .path-1 {
    left: 1.5rem;
    top: 1.9rem;
  }
  .path-1:before,
  .path-2:before {
    left: -0.2rem;
    top: 0.2rem;
  }
  .path-1:after {
    left: 0.2rem;
    top: -0.2rem;
  }
  .path-2 {
    left: 2.1rem;
    top: 1.3rem;
  }
}


// Index page

#indexPage {
  margin-top: -2.4rem;

  .graph1 {
    > .avatar + .avatar {margin-left: -.5rem}

    .avatar-xl > small {color: #fff}
  }

  .graph2 {
    max-width: 25rem;
    width: 95%;
    margin: .5rem auto;

    .tile {
      padding: .5rem .1rem;
      font-size: .6rem;
    }
  }

  .graph5 {
    .large {font-size: 2.5rem}
  }

  > .content {padding: 1.5rem .5rem}
}

body.has-index-content {box-shadow: inset 0 2.4rem 0 0 @color-primary}

#leadContent {
  padding: 1.5rem;

  > h1 {
    font-weight: normal;
    font-size: 1.5rem;
  }
}


// Display loading style

#pageLoading {display: none}
.has-display-loading #pageLoading {display: block}


// Code

pre em {
  font-weight: bold;
  color: #ea644a;
}


// TOC menu

#fabNav.waiting {
  transform: translate(0, 100%);
  opacity: 0;
}
#fabNav.open {transform: translate(0,0)!important}
#fabNav.open > a {box-shadow: none!important}
#fabNav.open > a > .icon:before {content: '\d7';}
body.has-index-content #fabNav {display: none}

#tocModal {top: auto;}
#tocList {padding: .25rem 0}
#tocList > .item {
  padding-left: 1.5em;
  padding-right: 1.5em;
}

.fab > .btn + .btn {margin-left: 0!important}