.root {
    composes: bg-white from global;
    composes: bottom-0 from global;
    composes: fixed from global;
    composes: grid from global;
    composes: grid-rows-autoFirst from global;
    composes: h-full from global;
    composes: left-auto from global;
    composes: max-w-modal from global;
    composes: opacity-0 from global;
    composes: overflow-hidden from global;
    composes: right-0 from global;
    composes: top-0 from global;
    composes: w-full from global;
    composes: z-dialog from global;
    transform: scale(1.15);
    transition-duration: 192ms;
    transition-timing-function: var(--venia-global-anim-out);
    transition-property: opacity, transform, visibility;

    @apply invisible;

    composes: lg_h-auto from global;
    composes: lg_max-h-modal from global;
    composes: lg_max-w-[740px] from global;
    composes: lg_top-[5vh] from global;
}

@media screen(-lg) {
    .root {
        transform: translate3d(100%, 0, 0);
    }
}

@media screen(lg) {
    /* TODO @TW: review */
    .root {
        left: calc(50% - 370px);
    }
}

.root_open {
    composes: root;

    @apply opacity-100;
    composes: shadow-modal from global;
    transform: scale(1);
    transition-duration: 224ms;
    transition-timing-function: var(--venia-global-anim-in);

    @apply visible;
}

@media screen(-lg) {
    .root_open {
        composes: root;

        transform: translate3d(0, 0, 0);
    }
}

.body {
    composes: overflow-auto from global;
    composes: px-xs from global;
    composes: py-2xs from global;

    composes: lg_px-md from global;
}

.header {
    composes: border-b from global;
    composes: border-solid from global;
    composes: border-subtle from global;
    composes: grid from global;
    composes: grid-flow-col from global;
    composes: justify-between from global;
    composes: p-3.5 from global;

    composes: lg_px-md from global;
    composes: lg_py-3.5 from global;
}

.headerText {
    composes: self-center from global;
    composes: text-subtle from global;
}