@layer addon { .templateFilter { .filters { @media (max-width: 56em) { .filterButton { z-index: 999; } } @media (--max-fablet) { .filterButton { z-index: 999; } } option { &:checked { font-weight: 600; &:before { top: unset; margin-top: unset; } } } } .pagination { color: var(--color-dark); padding-top: var(--padding); .pageCount { font-weight: 500; font-size: var(--xs-fontsize); } .button { background-color: rgba(var(--color-dark-transparency), 0.1); color: var(--color-dark); width: 40px; height: 40px; .icon { margin: 0; } &:hover { @media (hover: hover) { background-color: var(--color-dark); color: var(--color-light); } } } } input[type="text"], select, textarea { border-radius: var(--button-radius); } legend { font-size: var(--fontsize); line-height: var(--lineheight); } legend, label { font-weight: 500; } legend { &::first-letter { text-transform: capitalize; } } fieldset { padding: 0; background-color: transparent; input[type="checkbox"] { width: 24px; min-height: 24px; margin-right: 0; &:after { inset: 2px; } &:checked { border-color: var(--color-dark); background-color: var(--color-dark); &:after { background: var(--color-light); } } } label { gap: var(--gutter); .text { font-size: calc(var(--xs-fontsize) - 0.1rem); } } .count { padding: 8px; background-color: var(--form-accent-color); font-size: calc(var(--xs-fontsize) - 0.1rem); font-weight: 500; border-radius: 4px; min-width: 24px; text-align: center; } } .filterSearch { legend { font-size: var(--xs-fontsize); line-height: var(--xs-lineheight); } input, select { border-radius: 8px; padding: 12px var(--form-input-size); } label { .search, .pin { width: 24px; height: 24px; color: var(--color-dark); } .close { width: 16px; height: 16px; color: var(--color-dark); } } } .filterBlock { .filterHeader { .title { font-size: var(--s-fontsize); line-height: var(--s-lineheight); -webkit-background-clip: unset; background: none; color: var(--color-dark); } button { display: none; svg { margin: 0; } } @media (max-width: 56em) { display: flex; justify-content: space-between; align-items: center; button { display: flex; width: 40px; background-color: var(--color-dark); } } @media (--max-fablet) { display: flex; justify-content: space-between; align-items: center; button { display: flex; width: 40px; background-color: var(--color-dark); } } } @media (max-width: 56em) { padding-bottom: calc(var(--padding) * 3 + 50px); } @media (--max-fablet) { padding-bottom: calc(var(--padding) * 3 + 50px); } > button { @media (max-width: 56em) { display: none; } @media (--max-fablet) { display: none; } } } .filterSettings { .content { display: flex; gap: calc(var(--gutter) / 2); flex-wrap: wrap; } .tags { .tag { color: var(--color-light); padding: 8px 16px; border-radius: 8px; } .button { width: auto; font-size: calc(var(--xs-fontsize) - 0.1rem); &.tag { background-color: var(--color-dark); } .icon { opacity: 1; width: 8px; height: 8px; margin: 0; } .text {padding: 0 8px 0 0} } } } .filterCategory { .button { flex-direction: row-reverse; font-size: calc(var(--xs-fontsize) - 0.1rem); text-decoration: none; align-self: flex-end; gap: 8px; margin-top: 8px; } } @media (min-width: 56em) { .intro { text-align: center; display: grid; grid-template-columns: repeat(12, 1fr); width: 100%; column-gap: var(--gutter); .title, .subTitle, .content { grid-column: 4 / span 9; text-align: left; } } .filterBlock, .filterCategory { gap: var(--padding); } .filterBlock { margin-right: var(--gutter); } } @media (--min-fablet) { .intro { text-align: center; display: grid; grid-template-columns: repeat(12, 1fr); width: 100%; column-gap: var(--gutter); .title, .subTitle, .content { grid-column: 4 / span 9; text-align: left; } } .filterBlock, .filterCategory { gap: var(--padding); } .filterBlock { margin-right: var(--gutter); } } &.filterArticle { overflow: initial; .filters { grid-column: span 12; } .filterGrid { grid-column: span 12; } } &.filterPerson { .filters { grid-column: 4 / span 6; @media (max-width: 56em) { grid-column: span 12; } @media (--max-fablet) { grid-column: span 12; } input { padding: 16px 32px; border-width: 2px; border-radius: var(--button-radius); } .icon { color: var(--color-dark); svg { width: 24px; height: 24px; } } } .filterGrid { grid-column: span 12; padding-top: calc(var(--section) / 2); gap: var(--padding); .category-group { display: flex; flex-direction: column; align-items: center; gap: var(--padding); .title { font-size: var(--m-fontsize); line-height: var(--m-lineheight); } } } } &.filterJobPosting { padding-top: calc(var(--section) / 2); } } }