/* Desktop category flyout. Hidden everywhere else, so the drilldown stays in charge. */
.lvd-flyout,
.lvd-flyout-scrim {
    display: none;
}

@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
    .lvd-flyout:not([hidden]) {
        display: block;
        position: fixed;
        top: calc(var(--lvd-flyout-top, 0px) + 12px);
        left: calc(var(--lvd-flyout-left, 280px) + 4px);
        z-index: 104; /* Over page content, under the sticky top bar. */
        width: min(1040px, calc(100vw - var(--lvd-flyout-left, 280px) - 28px));
        bottom: 12px; /* Near full height: every sidebar row must have the panel to its right. */
        overflow-y: auto;
        padding: 24px;
        background: var(--lvd-color-white);
        border: 1px solid rgba(1, 6, 31, .08);
        border-radius: 18px;
        box-shadow: 0 2px 6px rgba(1, 6, 31, .06), 0 24px 64px rgba(1, 6, 31, .22);
        transform-origin: left center;
        animation: lvd-flyout-in .18s cubic-bezier(.25, .8, .25, 1);
    }

    @keyframes lvd-flyout-in {
        from {
            opacity: 0;
            transform: translateX(-4px) scale(.99);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .lvd-flyout:not([hidden]) {
            animation: none;
        }
    }

    .lvd-flyout-title {
        display: inline-block;
        margin-bottom: 20px;
        color: var(--lvd-color-black);
        font-size: 1.25rem;
        font-weight: 600;
        letter-spacing: -.01em;
        text-decoration: none;
        transition: color .15s ease;
    }

    .lvd-flyout-title:hover {
        color: var(--lvd-color-primary-dark);
    }

    .lvd-flyout-grid {
        columns: 3 220px;
        column-gap: 32px;
    }

    .lvd-flyout-group {
        break-inside: avoid;
        padding-bottom: 20px;
    }

    .lvd-flyout-group-title {
        display: block;
        margin-bottom: 6px;
        color: var(--lvd-color-black);
        font-weight: 600;
        text-decoration: none;
        transition: color .15s ease;
    }

    .lvd-flyout ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .lvd-flyout-link {
        display: block;
        padding: 3px 0;
        color: var(--lvd-color-text);
        font-size: .875rem;
        font-weight: 400;
        text-decoration: none;
        transition: color .15s ease;
    }

    .lvd-flyout-group-title:hover,
    .lvd-flyout-link:hover {
        color: var(--lvd-color-primary-dark);
    }

    .lvd-flyout a:focus-visible {
        outline: 2px solid var(--lvd-color-primary-dark);
        outline-offset: 2px;
    }

    /* Floats so the title keeps its line; sticky so it survives panel scrolling. */
    .lvd-flyout-close {
        position: sticky;
        top: 0;
        float: right;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        color: var(--lvd-color-black);
        background: rgba(1, 6, 31, .06);
        border: 0;
        border-radius: 50%;
        cursor: pointer;
        transition: background-color .15s ease;
    }

    .lvd-flyout-close:hover {
        background: rgba(1, 6, 31, .12);
    }

    .lvd-flyout-close:focus-visible {
        outline: 2px solid var(--lvd-color-primary-dark);
        outline-offset: 2px;
    }

    .lvd-flyout-close::before {
        content: '';
        width: 14px;
        height: 14px;
        background-color: currentColor;
        -webkit-mask: url('../assets/svg/bs-icons/x-lg.svg') center / contain no-repeat;
        mask: url('../assets/svg/bs-icons/x-lg.svg') center / contain no-repeat;
    }

    /* Fades the page so the panel stands out without a heavy frame. */
    .lvd-flyout-scrim:not([hidden]) {
        display: block;
        position: fixed;
        top: var(--lvd-flyout-top, 0px);
        left: var(--lvd-flyout-left, 280px);
        right: 0;
        bottom: 0;
        z-index: 103;
        background: rgba(255, 255, 255, .8);
        pointer-events: none;
        animation: lvd-flyout-scrim-in .18s ease;
    }

    /* Covers the sidebar's right border below the top bar. */
    .lvd-flyout-scrim::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: -1px;
        width: 1px;
        background: var(--lvd-color-white);
    }

    @keyframes lvd-flyout-scrim-in {
        from {
            opacity: 0;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .lvd-flyout-scrim:not([hidden]) {
            animation: none;
        }
    }

    .lvd-drilldown-menu .lvd-drilldown-root > li:not(.lvd-menu-special) {
        border-radius: 10px;
        transition: background-color .15s ease;
    }

    /* The open row keeps this state while the pointer is inside the panel. */
    .lvd-drilldown-menu .lvd-drilldown-root > li:not(.lvd-menu-special):hover,
    .lvd-drilldown-menu .lvd-drilldown-root > li.is-flyout-open:not(.lvd-menu-special) {
        background: var(--lvd-color-primary-dark);
        box-shadow: 0 6px 16px rgba(7, 31, 133, .28);
    }

    .lvd-drilldown-menu .lvd-drilldown-root > li:not(.lvd-menu-special):hover > a,
    .lvd-drilldown-menu .lvd-drilldown-root > li:not(.lvd-menu-special):hover > div > a,
    .lvd-drilldown-menu .lvd-drilldown-root > li.is-flyout-open:not(.lvd-menu-special) > div > a {
        color: var(--lvd-color-white) !important;
    }

    /* On desktop the row opens the panel, so its chevron is only an indicator. */
    .lvd-drilldown-root > li > div > .lvd-drilldown-btn {
        flex: 0 0 auto;
        margin-left: 8px;
        padding: 0;
        color: var(--lvd-color-gray-500) !important;
        pointer-events: none;
        transition: color .15s ease;
    }

    .lvd-drilldown-root > li > div > .lvd-drilldown-btn > span {
        display: block;
        width: 11px;
        height: 11px;
        background-color: currentColor;
        -webkit-mask: url('../assets/svg/bs-icons/chevron-right.svg') center / contain no-repeat;
        mask: url('../assets/svg/bs-icons/chevron-right.svg') center / contain no-repeat;
    }

    .lvd-drilldown-root > li > div > .lvd-drilldown-btn > span::before {
        content: none;
    }

    .lvd-drilldown-root > li:not(.lvd-menu-special):hover > div > .lvd-drilldown-btn,
    .lvd-drilldown-root > li.is-flyout-open:not(.lvd-menu-special) > div > .lvd-drilldown-btn {
        color: var(--lvd-color-white) !important;
    }
}