@import 'imports/colors';

// TOC Sidebar
.docs-component-sidebar {
  display: none;
}

@media (min-width: 1024px) {
  .docs-component-main {
    padding-right: 250px;
  }

  .docs-component-sidebar {
    -webkit-position: sticky;
    display: block;
    float: right;
    position: sticky;
    right: 20px;
    top: 80px;
    width: 230px;

    .docs-component-sidebar-toc > .toc {
      border-left: 3px solid $glue-blue-700;
      margin-left: 20px;
      padding-left: 20px;

      > ul {
        margin-left: 0px;
      }

      .toctitle {
        font-weight: 700;
        text-transform: uppercase;

        &:only-child {
          display: none;
        }
      }

      li {
        font-size: 14px;
        list-style: none;
        margin-top: 12px;

        a {
          color: $glue-grey-900;
          font-weight: 300;
          text-decoration: none;
        }
      }
    }

    .docs-component-sidebar-actions > ul li {
      font-weight: 700;
      font-size: 16px;
      list-style: none;
      margin-top: 12px;
      text-transform: uppercase;

      a,
      a:visited {
        color: $glue-blue-700;
        text-decoration: none;
      }

      a:hover,
      a:active,
      a:focus {
        color: $glue-blue-500;
      }
    }
  }
}
