.c-post-filters {
--c-post-filters-gap: 8px;
--c-post-filters-actions-gap: 12px;
width: 100%;
box-sizing: border-box;
}
.c-post-filters__form {
display: flex;
flex-direction: column;
gap: 16px;
}
.c-post-filters__fields {
display: flex;
flex-wrap: wrap;
gap: var(--c-post-filters-gap);
align-items: end;
}
.c-post-filters__field {
display: flex;
flex-direction: column;
min-width: 0;
flex: 0 0 auto;
}
.c-post-filters__label {
display: inline-flex;
align-items: center;
margin: 0 0 8px;
line-height: 1.2;
font-weight: 600;
}
.c-post-filters__select,
.c-post-filters__input {
width: 100%;
min-width: 0;
box-sizing: border-box;
border: 1px solid rgba(17, 24, 39, 0.18);
background: #ffffff;
color: #111827;
min-height: 48px;
padding: 0.8125rem 1rem;
border-radius: 0.75rem;
outline: none;
transition:
border-color 0.18s ease,
box-shadow 0.18s ease,
background-color 0.18s ease;
}
.c-post-filters__field--category .c-post-filters__select,
.c-post-filters__field--tag .c-post-filters__select {
width: fit-content;
max-width: 100%;
}
.c-post-filters__field--search {
flex: 0 0 auto;
}
.c-post-filters__select:focus,
.c-post-filters__input:focus {
border-color: #111827;
box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
}
.c-post-filters__actions {
display: flex;
flex-wrap: wrap;
gap: var(--c-post-filters-actions-gap);
align-items: center;
}
.c-post-filters__submit,
.c-post-filters__reset {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0.8125rem 1.125rem;
border: 1px solid transparent;
border-radius: 0.75rem;
font: inherit;
line-height: 1;
text-decoration: none;
cursor: pointer;
background-color: #111827;
color: #ffffff;
transition:
transform 0.18s ease,
border-color 0.18s ease,
background-color 0.18s ease,
color 0.18s ease;
}
.c-post-filters__reset {
background-color: rgba(17, 24, 39, 0.06);
color: #111827;
border-color: rgba(17, 24, 39, 0.12);
}
.c-post-filters__submit:hover,
.c-post-filters__submit:focus-visible,
.c-post-filters__reset:hover,
.c-post-filters__reset:focus-visible {
transform: translateY(-1px);
}
.c-post-filters__submit:focus-visible,
.c-post-filters__reset:focus-visible {
outline: none;
}
@media (max-width: 1024px) {
.c-post-filters__field--search {
flex-basis: 100%;
}
}
@media (max-width: 767px) {
.c-post-filters__actions {
width: 100%;
}
.c-post-filters__submit,
.c-post-filters__reset {
width: 100%;
}
}