/* Keep the field and its floating menu visually separate in either direction. */
.ui.selection.dropdown:where(.result-filter-dropdown):is(.active, :focus),
.ui.selection.dropdown:where(.result-filter-dropdown).active:hover,
.ui.selection.dropdown:where(.result-filter-dropdown):is(.active, :focus) > .menu,
.ui.selection.dropdown:where(.result-filter-dropdown).active:hover > .menu {
    border-color: var(--gray-200);
}

.ui.selection.dropdown:where(.result-filter-dropdown):focus-visible {
    outline: 2px solid var(--gray-700);
    outline-offset: 2px;
}

.ui.selection.dropdown:where(.result-filter-dropdown) > .menu,
.ui.selection.dropdown:where(.result-filter-dropdown):is(.active, :focus) > .menu,
.ui.selection.dropdown:where(.result-filter-dropdown).active:hover > .menu,
.ui.upward.active.selection.dropdown:where(.result-filter-dropdown):hover > .menu {
    box-shadow: 0 6px 20px rgba(var(--gray-1000-rgb), .16);
}

.ui.upward.selection.dropdown:where(.result-filter-dropdown) > .menu {
    margin-top: 0;
    margin-bottom: 4px;
}

/* Keep either opening direction within short phone screens. */
.ui.selection.dropdown:where(.result-filter-dropdown) > .menu {
    max-height: min(240px, 40vh);
    max-height: min(240px, 40dvh);
}

/* Match the existing search layout rule, and tighten only result filter rows. */
.search-well-nopadding.first-level-accordion .accordion-container.product-group-container .product-group-items .product-group-item-content .accordion-content-wrapper .search-sub-group .product-group-container .form-inline:where(:has(> .result-filter-dropdown)) {
    padding-block: 10px;
}

.form-inline:where(:has(> .result-filter-dropdown)) > label:where(:not(.hidden)) {
    display: block;
    font-size: 1.4rem;
    margin-bottom: 6px;
}

.ui.selection.dropdown:where(.form-inline > label:not(.hidden) + select + .result-filter-dropdown) {
    margin-top: 0;
}