.root {
    composes: bg-white from global;
    composes: bottom-0 from global;
    composes: grid from global;
    composes: h-full from global;
    composes: left-0 from global;
    composes: max-w-modal from global;
    composes: opacity-0 from global;
    composes: overflow-hidden from global;
    composes: fixed from global;
    composes: top-0 from global;
    composes: w-full from global;
    composes: z-dialog from global;
    grid-template-rows: 1fr 7rem;
    transform: translate3d(-100%, 0, 0);
    transition-duration: 192ms;
    transition-timing-function: var(--venia-global-anim-out);
    transition-property: opacity, transform, visibility;

    /* TODO @TW: review (B6) */
    /* composes: invisible from global; */
    visibility: hidden;
}

.root_open {
    composes: root;

    composes: opacity-100 from global;
    composes: shadow-modal from global;
    transform: translate3d(0, 0, 0);
    transition-duration: 224ms;
    transition-timing-function: var(--venia-global-anim-in);

    /* TODO @TW: review (B6) */
    /* composes: visible from global; */
    visibility: visible;
}

.body {
    composes: border-b from global;
    composes: border-solid from global;
    composes: border-subtle from global;
    composes: overflow-auto from global;
}

.header {
    composes: flex from global;
    composes: justify-between from global;
    composes: pb-0 from global;
    composes: pt-5 from global;
    composes: px-5 from global;
}

.headerTitle {
    composes: flex from global;
    composes: items-center from global;
    composes: leading-none from global;
    composes: text-xl from global;
}

.action {
    composes: pb-0 from global;
    composes: pt-xs from global;
    composes: px-xs from global;
}

/* TODO @TW: cannot compose */
.action button {
    /* composes: text-sm from global; */
    font-size: 0.875rem;
    /* composes: no-underline from global; */
    text-decoration: none;
}

.blocks {
    composes: pb-0 from global;
    composes: pt-xs from global;
    composes: px-xs from global;
}

/* TODO @TW: cannot compose */
.blocks > li:last-child {
    /* composes: border-b-2 from global; */
    /* composes: border-solid from global; */
    /* composes: border-subtle from global; */
    border-bottom: 2px solid rgb(var(--venia-global-color-border));
}