// sass-lint:disable no-important
// Refactor of entire CSS is sorely needed

.glossary {
  main {
    @media (min-width: 801px) {
      width: calc(100vw - 200px);
      margin-left: 200px;
    }
  }

  .page__header-wrap,
  .page__content {
    .inner-wrap {
      max-width: initial;
      margin-left: 1rem;
    }
  }
}

.component--glossary-toc {
  width: 200px; height: calc(100vh - 4rem);
  bottom: 0;

  background-color: $lbry-white;
  border-right: 1px solid $lbry-gray-1;
  font-size: 0.8rem;
  line-height: 1.33;
  overflow-x: hidden;
  overflow-y: auto;
  padding-left: 0 !important;
  position: fixed;
  z-index: 1;

  @media (min-width: 801px) {
    left: 0;
    padding-top: 0.25rem !important;
  }

  @media (max-width: 800px) {
    height: 100%;
    top: 0;
    padding-top: 9rem !important;
    // padding-bottom: 4rem;
    transition: left 0.2s;

    -webkit-overflow-scrolling: touch;

    &:not(.active) {
      left: -200px;
    }

    &.active {
      left: 0;
    }
  }

  // @media (max-width: 800px) {
  //   display: none;
  // }

  li {
    list-style-type: none !important;

    &:hover {
      background-color: $lbry-gray-2;
    }

    &:last-of-type {
      margin-bottom: 1rem;
    }

    a {
      padding: 0.25rem 0.5rem 0.25rem 0.75rem;
      background-image: none !important;
      color: inherit !important;
      display: block !important;
      text-shadow: none !important;
    }
  }
}