.submenu {
    composes: absolute from global;
    composes: bg-white from global;
    composes: flex-wrap from global;
    composes: justify-between from global;
    composes: left-0 from global;
    composes: px-3 from global;
    composes: py-5 from global;
    composes: right-0 from global;
    top: 80px;
    box-shadow: 0 3px rgb(var(--venia-global-color-gray-100));
}

/* TODO @TW: cannot compose */
.submenu::before {
    box-shadow: inset 0 2px rgb(var(--venia-global-color-gray-100));
    content: '';
    height: 10px;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}

.submenu_inactive {
    composes: submenu;
    composes: hidden from global;
}

.submenu_active {
    composes: submenu;
    composes: flex from global;
}

.submenuItems {
    composes: flex from global;
    composes: flex-wrap from global;
    composes: justify-between from global;
    composes: max-w-site from global;
    composes: ml-auto from global;
    composes: mr-auto from global;
}