.list-header {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .5rem;
}
.list-header-sort {
padding-left: 1rem;
padding-right: 1rem;
.list-header-search {
flex: 1;
justify-content: center;
min-width: 200px; /* to enable flexbox wrapping on mobile */
.list-header-search .input {
.small-menu-items {
min-height: 35.4px !important; /* match .small.button in height */
background: none !important; /* fomantic sets a color here which does not play well with active transparent color on the item, so unset and set the colors on the item */
.small-menu-items .item {
background: var(--color-menu) !important;
padding-top: 6px !important;
padding-bottom: 6px !important;
.small-menu-items .item:hover {
background: var(--color-hover) !important;
.small-menu-items .item.active {
background: var(--color-active) !important;
@media (max-width: 767.98px) {
order: 0;
.list-header-toggle {
order: 1;
order: 2;
margin-left: auto;