@import (inline)  "link-pseudo-icon.css";

html, body {
  padding: 0;
  margin: 0;
  font-family: arial, sans-serif;
}

body {
  background-color: #f5f7f8;
}

.jump-links {
  position: -webkit-sticky;
  position: sticky;
  z-index: 900;
  top: 0;
  min-height: 2.6em;
  background-color: #f5f7f8;

  .z-collapse {
    background: none;

    > .items {
      border-bottom: none;

      > .item {
        margin: 3px;
        border: none;

        > .node {
          float: right;
          border-bottom: none;
          background: #f5f7f8;

          .in {
            margin-right: 1em;
          }
        }

        > .content {
          clear: both;
          padding: 0;
        }

        &.expanded {
          background: #fff;
          box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);

          > .node {
            background: #fff;
            border-bottom-color: transparent;
          }
        }
      }
    }
  }

  .links {
    padding: 0 3em 0.6em;

    .group {
      .title {
        color: #666;
      }

      .items {
        padding: 6px 0;
      }
    }

    .link-item {
      width: 7em;
      margin-bottom: 1em;
      display: inline-block;

      a {
        color: #007bff;
      }
    }
  }
}

.main {
  padding: 10px 30px;
  overflow: hidden;
  min-height: 80em;

  .sidebar {
    width: 270px;
    margin-right: 6px;

    .toolbar {
      padding: 0.6em 1em;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .nav-tree {
      background-color: #fff;

      .z-tree .item > .node {
        display: block;
        cursor: pointer;
        color: rgba(0, 0, 0, .65);

        &:hover {
          color: rgba(0, 0, 0, .85);
        }

        .expand {
          float: right;
          margin-top: 0.3em;
        }

        .in {
          cursor: pointer;

          &:hover {
            background: none;
          }
        }
      }

      .z-tree .item.selected > .node {
        font-weight: bolder;
        color: rgba(0, 0, 0, .85);

        .in {
          background: none;
          color: rgba(0, 0, 0, .85);
        }
      }

      .new, .update {
        float: right;
        margin: 0.2em 0.3em;
        padding: 1px;
        border-radius: 2px;
        font-size: 60%;
        font-weight: lighter;
        color: #fff;
      }

      .new {
        background-color: #ca3c3c;
      }

      .update {
        background-color: #1cb841;
      }
    }
  }

  > div:last-child {
    padding: 1em 2em;
    background-color: #fff;
  }

  .introduction {
    &:not(:empty) + .demo_content {
      display: none;
    }
  }

  .demo_content {
    h2, h3 {
      margin-bottom: 10px;
      font-weight: normal;
    }

    > div {
      padding: 0.3em;
    }

    > .theme {
      text-align: right;

      select {
        width: 120px;
      }
    }

    > .title {
      display: flex;
      align-items: center;

      h2 {
        margin-right: auto;
      }
    }

    > .content {
      height: 380px;
      position: relative;
      border: 1px solid #efefef;

      &.large {
        height: 620px;
      }

      iframe {
        border: none;
      }
    }

    > .description {
      display: none;
    }

    > .source-code {
      display: none;
    }
  }
}

