#filters-dropdown::part(menu) {
    border-radius: var(--wa-border-radius-l);
    box-shadow: var(--wa-shadow-l);
}

.filters-panel {
    background: var(--wa-color-surface-default);
    min-width: 300px;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    max-height: 500px;
    overflow: hidden;
    box-sizing: border-box;
}

.filters-panel > .wa-heading-l {
    padding: var(--wa-space-l);
}

.filters-panel-scroll {
    flex: 1;
    min-height: 0;
    --shadow-color: var(--wa-color-shadow);
    --shadow-size: 1.5rem;
}

#filters-selected {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-xs);
    padding: var(--wa-space-xl);
    margin-bottom: var(--wa-space-m);
}

.filters-selected-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wa-space-xs);
    align-items: center;
}

.filters-panel-title {
    font-size: var(--wa-font-size-m);
    font-weight: var(--wa-font-weight-semibold);
    margin-bottom: var(--wa-space-xs);
}

#filter-type-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wa-space-xs);
}

.filters-panel-type-btn[data-selected]::part(base) {
    background: var(--wa-color-neutral-on-loud);
    color: var(--wa-color-neutral-fill-loud);
    border-color: var(--wa-color-neutral-fill-loud);
}

.filters-panel-body {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-2xs);
    padding: var(--wa-space-xl);
}

.filters-section-label {
    font-size: var(--wa-font-size-m);
    font-weight: var(--wa-font-weight-semibold);
    margin-bottom: var(--wa-space-xs);
}

.filters-panel-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--wa-space-l);
}

.filters-panel-full-divider {
    --spacing: 0;
}

#filter-rating {
    align-self: flex-start;
}

#filters-clear[disabled]::part(base):hover {
    background-color: transparent;
}

@media (max-width: 700px) {
    .filters-button-label {
        display: none;
    }

    #filters-button::part(caret) {
        display: none;
    }

    #filters-button wa-icon[slot="start"] {
        margin-inline-end: 0;
    }
}