.root {
    composes: items-center from global;
    composes: justify-items-center from global;
    composes: justify-self-center from global;
    composes: max-w-site from global;
    composes: px-xs from global;
    composes: py-0 from global;
    composes: w-full from global;

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

.root_open {
    composes: root;

    composes: z-dropdown from global;

    /* TODO @TW: review (B6) */
    /* composes: grid from global; */
    display: grid;
}

.form {
    composes: grid from global;
    composes: items-center from global;
    composes: justify-items-stretch from global;
    composes: w-full from global;
}

.container {
    composes: inline-flex from global;
    composes: items-center from global;
    composes: justify-center from global;
    composes: max-w-[24rem] from global;
    composes: pb-xs from global;
    composes: relative from global;
    composes: w-full from global;
}

.search {
    composes: grid from global;
    composes: relative from global;
}

.autocomplete {
    composes: grid from global;
    /* composes: relative from global; */
    composes: z-menu from global;
}