/* The window opens on top of its card, starting at the card's size, so nothing around it moves */
.expanding-card-window {
    max-width: var(--expanding-card-max-width);
    clip-path: inset(-2rem round 0);
    transition: clip-path 180ms ease-out;
}

[data-expanding-card-leftwards] .expanding-card-window {
    left: auto;
    right: 0;
}

@starting-style {
    .expanding-card-window[open] {
        clip-path: inset(0 calc(100% - var(--expanding-card-width)) calc(100% - var(--expanding-card-height)) 0 round var(--radius-box));
    }

    [data-expanding-card-leftwards] .expanding-card-window[open] {
        clip-path: inset(0 0 calc(100% - var(--expanding-card-height)) calc(100% - var(--expanding-card-width)) round var(--radius-box));
    }
}

/* Above the neighbouring cards, whose dropdowns sit at z-index 25 */
[data-controller~="expanding-card"]:has(.expanding-card-window[open]) {
    position: relative;
    z-index: 26;
}