/* ============================================================
   GUIDE CONTENTS
   Usage: Views/Guides/Get.cshtml; one list that Bootstrap's offcanvas-xl shows as a rail from xl and as a bottom sheet below.
   guide-bars.js sets --guide-bar-top and --guide-bar-height on the root, and aria-current on the current entry.
   ============================================================ */
.guide-contents__title {
    font-size: 12px;
    letter-spacing: 0.08em;
}

.guide-contents__link {
    display: block;
    margin-left: calc(-1 * var(--bs-border-width));
    padding: 7px 0 7px 16px;
    border-left: 2px solid transparent;
    color: var(--bs-secondary-color);
    font-size: 14px;
    line-height: 1.45;
    text-decoration: none;
}

.guide-contents__link:hover {
    color: var(--bs-body-color);
}

.guide-contents__link[aria-current] {
    border-left-color: var(--bs-primary);
    color: var(--bs-success-text-emphasis);
    font-weight: 600;
}

/* xl and up */
@media (min-width: 1200px) {
    .guide-contents {
        position: sticky;
        top: calc(var(--guide-bar-top, 0px) + var(--guide-bar-height, 0px) + 1rem);
        max-height: calc(100vh - var(--guide-bar-top, 0px) - var(--guide-bar-height, 0px) - 2rem);
        overflow-y: auto;
    }
}

/* lg and below */
@media (max-width: 1199.98px) {
    .guide-contents {
        --bs-offcanvas-height: auto;
    }

    .guide-contents__body {
        max-height: 70vh;
    }
}