// Mobile TOC Sticky Positioning
.toc-mobile-sticky {
  position: sticky;
  top: 58px;
  z-index: 10;
  background-color: var(--bs-body-bg);
  margin: -32px -24px 60px;

  details {
    border-top: 0;
    // border-right: 0;
    border-left: 0;
    border-radius: 0;

    summary {
      padding-left: 24px;
      padding-right: 24px;
    }

    .page-links {
      padding-left: 8px;
      padding-right: 8px;
    }
  }
}

@include media-breakpoint-up(lg) {
  .toc-mobile-sticky {
    position: sticky;
    top: 68px;
  }
}

// Adjust the vertical margin of the On this page section for mobile, when the global alert is open
#announcement + div .toc-mobile-sticky,
#announcement ~ * .toc-mobile-sticky {
  margin: -8px -24px 36px;
}

@include color-mode(dark) {
  .toc-mobile-sticky {
    background-color: var(--bs-body-bg);
    border-bottom-color: var(--bs-border-color);
  }
}

@include media-breakpoint-down(xl) {
  .docs-content > h2[id]::before,
  .docs-content > h3[id]::before,
  .docs-content > h4[id]::before {
    display: block;
    height: 144px !important;
    margin-top: -144px !important;
    content: "";
  }
}

@include media-breakpoint-down(lg) {
  .docs-content > h2[id]::before,
  .docs-content > h3[id]::before,
  .docs-content > h4[id]::before {
    display: block;
    height: 128px !important;
    margin-top: -128px !important;
    content: "";
  }
}

.toc-mobile {
  details summary:hover {
    background-color: transparent;
  }

  details summary::after {
    display: inline-block;
    content: url("data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjI0IiAgaGVpZ2h0PSIyNCIgIHZpZXdCb3g9IjAgMCAyNCAyNCIgIGZpbGw9Im5vbmUiICBzdHJva2U9ImN1cnJlbnRDb2xvciIgIHN0cm9rZS13aWR0aD0iMiIgIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgIHN0cm9rZS1saW5lam9pbj0icm91bmQiICBjbGFzcz0iaWNvbiBpY29uLXRhYmxlciBpY29ucy10YWJsZXItb3V0bGluZSBpY29uLXRhYmxlci1tZW51LWRlZXAiPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik00IDZoMTYiIC8+PHBhdGggZD0iTTcgMTJoMTMiIC8+PHBhdGggZD0iTTEwIDE4aDEwIiAvPjwvc3ZnPg==");
    transition: transform 0.35s ease;
    transform-origin: center center;
    position: absolute;
    right: 1rem;
  }

  details[open] > summary::after {
    transform: none;
  }
}

@include color-mode(light) {
  .toc-mobile details[open] > summary {
    border-bottom: 1px solid $gray-200;
  }
}

@include color-mode(dark) {
  .toc-mobile {
    details summary::after {
      content: url("data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjI0IiAgaGVpZ2h0PSIyNCIgIHZpZXdCb3g9IjAgMCAyNCAyNCIgIGZpbGw9Im5vbmUiICBzdHJva2U9InJnYmEoMjIyLCAyMjYsIDIzMCwgMC43NSkiICBzdHJva2Utd2lkdGg9IjIiICBzdHJva2UtbGluZWNhcD0icm91bmQiICBzdHJva2UtbGluZWpvaW49InJvdW5kIiAgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItbWVudS1kZWVwIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNNCA2aDE2IiAvPjxwYXRoIGQ9Ik03IDEyaDEzIiAvPjxwYXRoIGQ9Ik0xMCAxOGgxMCIgLz48L3N2Zz4=");
    }
  }
}