@layer addon { .templateFilter.filterArticle { .intro { .title, .content { width: 100%; grid-column: 3 / span 8; text-align: center; } } .filterButton { display: none; } .filterSettings { .text { display: none; } .tags { display: none; } } .filterBlock { margin-right: 0; @media (max-width: 56em) { position: relative; z-index: 1; left: auto; right: auto; top: auto; padding: 0; overflow: unset; } @media (--max-fablet) { position: relative; z-index: 1; left: auto; right: auto; top: auto; padding: 0; overflow: unset; } > button { display: none; } } .filterCategory { fieldset { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; legend {display: none;} input { display: none; } .count { display: none; } label { width: auto; } .text { padding: 10px 16px; border-radius: var(--button-radius); border: 1px solid var(--color-dark); } label input:checked + .text { background-color: var(--color-dark); color: var(--color-light); } } .dropdowns { display: flex; justify-content: center; align-items: center; .dropdown.show { position: relative; width: 100%; .placeholder { border: 2px solid var(--color-dark); border-radius: 32px; padding: var(--button-padding) var(--gutter); font-size: var(--fontsize); line-height: 1; display: flex; justify-content: space-between; align-items: center; gap: var(--gutter); .icon { width: 12px; height: 12px; } .text { padding-right: 52px; } .count { position: absolute; right: 52px; background: var(--color-dark); color: var(--color-light); width: 24px; height: 24px; border-radius: 24px; display: flex; justify-content: center; align-items: center; font-size: var(--xs-fontsize); font-weight: 600; } } select { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } } details.dropdown { position: relative; width: 50%; min-width: 350px; @media (max-width: 56em) { width: 100%; } @media (--max-fablet) { width: 100%; } summary { border: 2px solid var(--color-dark); padding: 16px 32px; font-size: var(--fontsize); display: flex; justify-content: space-between; align-items: center; gap: var(--gutter); border-radius: 32px; line-height: 30px; .icon { width: 12px; height: 12px; } .text { padding-right: 52px; } .count { position: absolute; right: 52px; background: var(--color-dark); color: var(--color-light); width: 24px; height: 24px; border-radius: 24px; display: flex; justify-content: center; align-items: center; font-size: var(--xs-fontsize); font-weight: 600; } } .dropdownContent { position: absolute; z-index: 9; top: 100%; left: 0; background: #fff; width: 100%; padding: calc(var(--gutter) / 2) var(--gutter) var(--gutter); border: 2px solid var(--color-dark); border-bottom-left-radius: 32px; border-bottom-right-radius: 32px; border-top: 0; opacity: 0; label { input { width: 24px; min-height: 24px; margin-right: 0; } .text { font-size: var(--xs-fontsize); } } } &[open] { summary { border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom :18px; } .dropdownContent { opacity: 1; } } } } } } }