@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lcdo7z9xd2.bundle.scp.css';

/* /Components/ListDetailLayout.razor.rz.scp.css */
.page-layout[b-lhfwems07y] {
    display: flex;
    gap: 16px;
    flex: 1;
    min-height: 0;
}

.list-panel[b-lhfwems07y] {
    flex: var(--list-flex, 1);
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.detail-panel[b-lhfwems07y] {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
}

.back-to-list[b-lhfwems07y] {
    display: none;
    margin-bottom: 10px;
}

/*
 * Narrow screens have room for one panel, so the two become a master-to-detail pair:
 * the list until something is selected, the detail with a way back afterwards.
 */
@media (max-width: 900px) {
    .page-layout[b-lhfwems07y] {
        flex-direction: column;
        gap: 0;
    }

    .divider[b-lhfwems07y] {
        display: none;
    }

    .page-layout:not(.has-selection) .detail-panel[b-lhfwems07y] {
        display: none;
    }

    .page-layout.has-selection .list-panel[b-lhfwems07y] {
        display: none;
    }

    /*
     * A divider drag on a wide screen leaves an inline pixel width on the list panel.
     * Stacked, that width is a height, so it has to be discarded rather than inherited.
     */
    .list-panel[b-lhfwems07y],
    .detail-panel[b-lhfwems07y] {
        flex: 1 1 auto !important;
    }

    .page-layout.has-selection .detail-panel[b-lhfwems07y] {
        animation: detail-enter-b-lhfwems07y 180ms ease-out;
    }

    .page-layout.has-navigated:not(.has-selection) .list-panel[b-lhfwems07y] {
        animation: list-return-b-lhfwems07y 180ms ease-out;
    }

    .back-to-list[b-lhfwems07y] {
        display: block;
    }
}

@keyframes detail-enter-b-lhfwems07y {
    from { opacity: .4; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes list-return-b-lhfwems07y {
    from { opacity: .4; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}