@layer theme {
    :root {
    	--ds-panels-list-width: 20em;
    	--ds-panels-padding: var(--ds-space-d4);
    }
}
@layer component {
	.ds-panels-container {
		height: 100%;
		width: 100%;
		overflow: hidden;
		overflow-x: scroll;
	}
    .ds-panels-panes {
        display: flex;
        flex-wrap: nowrap;
    }
    .ds-panels-pane {
        scroll-snap-align: start;
        width: 100%;
        flex-shrink: 0;
        padding: var(--ds-panels-padding);  
    }
    .ds-panels-list-details {
        height: 100%;
        width: 100%;
        overflow: auto;
        scroll-snap-type: x mandatory;
        @media (prefers-reduced-motion: no-preference) {
            scroll-behavior: smooth;
        }
    }
    .ds-panels-heading {
        width: 100%;
        overflow: hidden;
        z-index: 10;
    }
    .ds-panels-heading::after {
        background: var(--ds-color-background);
        width: var(--ds-panels-list-width);
        height: calc((var(--ds-line-height) * 1.5) + var(--ds-space-d4));
        display: block;
        content: "";
        position: absolute;
        top: calc(-1 * var(--ds-space-d2));
        z-index: -1;
    }
    @media screen and (min-width: 720px) {
        .ds-panels-list-details {
            scroll-snap-type: none;
        }
        .ds-panels-list-details .ds-panels-panes {
            display: grid;
            grid-template-areas: "list details";
            grid-template-columns: var(--ds-panels-list-width) 1fr;
        }
        .ds-panels-list-details .ds-panels-pane {
            width: auto;
        }
    }
}