.metacom-loop-loading {
position: relative !important;
}
.metacom-category-loader-wrap {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-height: inherit;
z-index: 20;
pointer-events: none;
}
.metacom-category-loader {
display: block;
width: 32px;
height: 32px;
flex: 0 0 32px;
border: 3px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: metacom-category-spin .75s linear infinite;
}
.metacom-loop-loading > :not(.metacom-category-loader-wrap) {
opacity: .18;
transition: opacity .12s ease;
}
.metacom-loop-enter {
opacity: 0;
}
.metacom-loop-enter.is-visible {
opacity: 1;
transition: opacity .2s ease;
} .metacom-category-filter-nav {
display: none;
}
.metacom-category-filter-dropdown {
position: relative;
display: block;
width: 200px;
max-width: 100%;
} .metacom-category-filter-dropdown-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
font-size: 16px;
line-height: 1.2;
color: #524441;
background: #fff;
padding: 10px 16px 10px 24px;
border: 1px solid #D6C2BE;
border-radius: 18px;
box-shadow: none;
cursor: pointer;
text-align: left;
text-decoration: none;
}
.metacom-category-filter-dropdown-toggle:focus,
.metacom-category-filter-dropdown-toggle:focus-visible,
.metacom-category-filter-dropdown-toggle:active {
outline: none;
box-shadow: none;
}
.metacom-category-filter-dropdown.is-open .metacom-category-filter-dropdown-toggle {
border-radius: 18px 18px 0 0;
border-bottom-color: #D6C2BE;
}
.metacom-category-filter-dropdown-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
margin-left: 16px;
color: #524441;
transition: transform .18s ease;
}
.metacom-category-filter-dropdown.is-open .metacom-category-filter-dropdown-icon {
transform: rotate(180deg);
} .metacom-category-filter-dropdown-menu {
position: absolute;
top: calc(100% - 1px);
left: 0;
right: 0;
z-index: 1000;
box-sizing: border-box;
background: #fff;
border: 1px solid #D6C2BE;
border-top: 0;
border-radius: 0 0 18px 18px;
padding: 0 0 10px;
overflow: hidden;
box-shadow: none;
}
.metacom-category-filter-dropdown-menu[hidden] {
display: none !important;
}
.metacom-category-filter-dropdown-option {
display: block;
width: 100%;
box-sizing: border-box;
font: inherit;
font-size: 16px;
line-height: 1.25;
color: #524441;
background: #fff;
padding: 12px 24px;
border: 0;
border-radius: 0;
box-shadow: none;
text-align: left;
cursor: pointer;
text-decoration: none;
}
.metacom-category-filter-dropdown-option:focus,
.metacom-category-filter-dropdown-option:focus-visible,
.metacom-category-filter-dropdown-option:active {
outline: none;
box-shadow: none;
} .metacom-category-filter-dropdown-option:hover,
.metacom-category-filter-dropdown-option:focus-visible,
.metacom-category-filter-dropdown-option.active {
background: #fff;
color: #524441;
}
@media (min-width: 768px) {
.metacom-category-filter[data-desktop-dropdown="0"] .metacom-category-filter-nav {
display: flex;
}
.metacom-category-filter[data-desktop-dropdown="0"] .metacom-category-filter-dropdown {
display: none;
}
.metacom-category-filter[data-desktop-dropdown="1"] .metacom-category-filter-nav {
display: none;
}
.metacom-category-filter[data-desktop-dropdown="1"] .metacom-category-filter-dropdown {
display: block;
}
}
@keyframes metacom-category-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.metacom-category-loader {
animation-duration: 1.5s;
}
.metacom-loop-enter.is-visible,
.metacom-loop-loading > :not(.metacom-category-loader-wrap),
.metacom-category-filter-dropdown-icon {
transition-duration: 0s;
}
}