.docs-main {
  margin-top: var(--docs-main-offset);
}

.docs-description {
  color: var(--amplify-colors-font-secondary);
  font-size: var(--amplify-font-sizes-large);
  padding-top: var(--amplify-space-medium);
  margin: 0;
}

.docs-meta {
  padding-bottom: var(--amplify-space-medium);
}

.docs-content {
  max-width: 80rem;
  padding-block-start: var(--amplify-space-medium);
  padding-inline: var(--docs-horizontal-padding);
  padding-block-end: var(--docs-horizontal-padding);
}

.docs-content-body {
  scroll-margin-block-start: var(--docs-main-offset);

  &:focus-visible {
    outline: 2px solid var(--amplify-colors-border-focus);
    outline-offset: var(--amplify-space-xs);
    z-index: 2;
  }

  & > * + *,
  & .amplify-tabs__panel > * + * {
    margin-top: var(--amplify-space-medium);
  }

  // Targeting tabs
  & > [data-orientation] {
    & > [role='tablist'] button {
      // 20rem is kind of magic here; it's at least the height of the page above the page tabs.
      // Since we add a scroll-margin-block-start to tabpanel below, we need to add
      // this here to scroll the top of the page when reverse keyboard navigating
      // so elements aren't hidden by sticky nav.
      scroll-margin-block-start: 20rem;
    }
    & > [role='tabpanel'] {
      // Prevent demo from getting cut off by sticky nav
      // when keyboard navigating.
      scroll-margin-block-start: 7rem;
      padding-top: var(--amplify-space-medium);
      // Don't add top margin to h2's since they already
      // have top margin
      & > * + *:not(h2) {
        margin-top: var(--amplify-space-medium);
      }
    }
  }

  & .amplify-expander__content__text > * {
    margin-top: var(--amplify-space-medium);
  }

  // MDX/markdown generated table styles
  & > table:not(.docs-responsiveTable) {
    border-collapse: collapse;
    width: 100%;

    & td,
    & th {
      padding: var(--amplify-space-small) var(--amplify-space-medium);
      border: var(--amplify-border-widths-small) solid
        var(--amplify-colors-border-tertiary);
    }
  }
}

.docs-page-tab {
  & > * + * {
    margin-block-start: var(--amplify-space-medium);
  }
}
