.c-vic-program-category-filter {
--vic-program-category-filter-list-gap: 0.75rem;
--vic-program-category-filter-link-gap: 0.5rem;
--vic-program-category-filter-background: #ffffff;
--vic-program-category-filter-border-color: rgba(17, 24, 39, 0.16);
--vic-program-category-filter-color: #111827;
--vic-program-category-filter-active-background: #111827;
--vic-program-category-filter-active-color: #ffffff;
display: flex;
flex-direction: column;
align-items: flex-start;
row-gap: 1rem;
width: 100%;
box-sizing: border-box;
}
.c-vic-program-category-filter__categories {
width: 100%;
}
.c-vic-program-category-filter__list {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: var(--vic-program-category-filter-list-gap);
list-style: none;
margin: 0;
padding: 0;
}
.c-vic-program-category-filter__item {
display: flex;
width: 100%;
justify-content: flex-start;
margin: 0;
}
.c-vic-program-category-filter__link,
.c-vic-program-category-filter__date-trigger,
.c-vic-program-category-filter__date-clear,
.c-vic-program-category-filter__date-submit,
.c-vic-program-category-filter__date-input {
border: 1px solid var(--vic-program-category-filter-border-color);
border-radius: 0.5rem;
box-sizing: border-box;
}
.c-vic-program-category-filter__link {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: var(--vic-program-category-filter-link-gap);
width: 100%;
padding: 0.75rem 1rem;
background: var(--vic-program-category-filter-background);
color: var(--vic-program-category-filter-color);
text-decoration: none;
line-height: 1.2;
transition:
background-color 0.18s ease,
border-color 0.18s ease,
color 0.18s ease,
transform 0.18s ease;
}
.c-vic-program-category-filter__link:hover,
.c-vic-program-category-filter__link:focus-visible,
.c-vic-program-category-filter__date-trigger:hover,
.c-vic-program-category-filter__date-trigger:focus-visible,
.c-vic-program-category-filter__date-clear:hover,
.c-vic-program-category-filter__date-clear:focus-visible,
.c-vic-program-category-filter__date-submit:hover,
.c-vic-program-category-filter__date-submit:focus-visible,
.c-vic-program-category-filter__date-input:focus-visible {
border-color: var(--vic-program-category-filter-color);
color: var(--vic-program-category-filter-color);
}
.c-vic-program-category-filter__link:hover,
.c-vic-program-category-filter__link:focus-visible,
.c-vic-program-category-filter__date-trigger:hover,
.c-vic-program-category-filter__date-trigger:focus-visible,
.c-vic-program-category-filter__date-clear:hover,
.c-vic-program-category-filter__date-clear:focus-visible,
.c-vic-program-category-filter__date-submit:hover,
.c-vic-program-category-filter__date-submit:focus-visible {
transform: translateY(-1px);
}
.c-vic-program-category-filter__link:focus-visible,
.c-vic-program-category-filter__date-trigger:focus-visible,
.c-vic-program-category-filter__date-clear:focus-visible,
.c-vic-program-category-filter__date-submit:focus-visible,
.c-vic-program-category-filter__date-input:focus-visible {
outline: none;
}
.c-vic-program-category-filter__label,
.c-vic-program-category-filter__date-trigger-label {
display: inline-block;
}
.c-vic-program-category-filter__active-icon,
.c-vic-program-category-filter__date-icon {
display: none;
flex: 0 0 auto;
width: 1em;
height: 1em;
line-height: 0;
}
.c-vic-program-category-filter__date-icon {
display: inline-flex;
}
.c-vic-program-category-filter__active-icon img,
.c-vic-program-category-filter__active-icon svg,
.c-vic-program-category-filter__date-icon img,
.c-vic-program-category-filter__date-icon svg {
display: block;
width: 100%;
height: 100%;
}
.c-vic-program-category-filter__link.is-active,
.c-vic-program-category-filter__link[aria-current="true"] {
gap: 4px;
background: var(--vic-program-category-filter-active-background);
border-color: var(--vic-program-category-filter-active-background);
color: var(--vic-program-category-filter-active-color);
}
.c-vic-program-category-filter__link.is-active .c-vic-program-category-filter__active-icon,
.c-vic-program-category-filter__link[aria-current="true"] .c-vic-program-category-filter__active-icon {
display: inline-flex;
}
.c-vic-program-category-filter__date-filter {
position: relative;
width: 100%;
}
.c-vic-program-category-filter__date-actions {
display: flex;
align-items: stretch;
gap: 0.5rem;
width: 100%;
}
.c-vic-program-category-filter__date-trigger {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 0.5rem;
width: 100%;
padding: 0.75rem 1rem;
background: var(--vic-program-category-filter-background);
color: var(--vic-program-category-filter-color);
cursor: pointer;
line-height: 1.2;
text-align: left;
transition:
background-color 0.18s ease,
border-color 0.18s ease,
color 0.18s ease,
transform 0.18s ease;
}
.c-vic-program-category-filter__date-clear {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
padding: 0.75rem 1rem;
background: var(--vic-program-category-filter-background);
color: var(--vic-program-category-filter-color);
line-height: 1;
text-decoration: none;
transition:
background-color 0.18s ease,
border-color 0.18s ease,
color 0.18s ease,
transform 0.18s ease;
}
.c-vic-program-category-filter__date-panel {
width: 100%;
margin-top: 0.75rem;
padding: 1rem;
border: 1px solid rgba(17, 24, 39, 0.08);
border-radius: 0.75rem;
background: #f8fafc;
box-sizing: border-box;
}
.c-vic-program-category-filter__date-panel[hidden] {
display: none;
}
.c-vic-program-category-filter__date-form {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
}
.c-vic-program-category-filter__date-field {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.c-vic-program-category-filter__date-field-label {
color: #334155;
font-size: 0.875rem;
line-height: 1.3;
}
.c-vic-program-category-filter__date-input {
width: 100%;
min-height: 2.75rem;
padding: 0.75rem 0.875rem;
background: #ffffff;
color: #111827;
}
.c-vic-program-category-filter__date-submit {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.75rem;
padding: 0.75rem 1rem;
background: #111827;
border-color: #111827;
color: #ffffff;
cursor: pointer;
transition:
background-color 0.18s ease,
border-color 0.18s ease,
color 0.18s ease,
transform 0.18s ease;
}
.c-vic-program-category-filter.is-loading {
opacity: 0.85;
}
@media (max-width: 767px) {
.c-vic-program-category-filter__date-form {
grid-template-columns: 1fr;
}
.c-vic-program-category-filter__date-actions {
flex-wrap: wrap;
}
.c-vic-program-category-filter__date-clear {
width: 100%;
}
}