html {
  scroll-padding-top: 5rem;
}

body {
  --docs-header-height: 3.125rem;
  --docs-max-width: 90rem;
  --docs-nav-width: 19rem;
  --docs-toc-top: 7.75rem;
  --docs-toc-width: 17rem;
  -webkit-text-size-adjust: none; /* stylelint-disable-line plugin/no-unsupported-browser-features */
  overscroll-behavior: none;
  overflow-x: hidden;

  @media (width <= 75rem) {
    --docs-toc-width: 13rem;
  }
}

.docs-toc__content {
  width: var(--docs-toc-width);
  position: sticky;
  top: var(--docs-toc-top);

  @media (width <= 40rem) {
    display: none;
  }
}

.docs-layout {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  font-family: var(--ld-font-body);
  margin: 0 auto;
  max-width: var(--docs-max-width);
  min-height: calc(100vh - var(--docs-header-height));

  &.hydrated {
    visibility: visible !important;
  }

  &::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
  }

  :where(a:not([class*='ld-'], [class*='docs-'], .ld-notice *)) {
    text-decoration: none;
    color: inherit;
  }
}

.docs-nav {
  width: var(--docs-nav-width);

  @media (width <= 52rem) {
    transition: transform 0.2s ease, visibility 0s 0.2s linear;
    visibility: hidden;
    transform: translateX(-100%);
    position: fixed;
    height: calc(100% - var(--docs-header-height));
    box-shadow: var(--ld-shadow-hover);
  }
}

@media (width <= 52rem) {
  .docs-nav:target {
    visibility: visible;
    transform: translateX(0);
    transition: transform 0.2s ease;

    + .docs-nav-backdrop {
      transition: opacity 0.2s linear;
      display: block;
      pointer-events: auto;
      visibility: visible;
      opacity: 0.5;
    }

    ~ .docs-btn-toggle-nav {
      .docs-btn-toggle-nav__close {
        display: inline-flex;
      }
      .docs-btn-toggle-nav__open {
        display: none;
      }
    }
  }
}
