.filter {
    max-height: 50dvh;
    max-width: 100%;
    padding: 9px;
    width: 300px;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    transition: height 150ms var(--deceleration-curve);
    z-index: 0;

    &::-webkit-scrollbar {
        display: none;
        height: 0;
        width: 0;
    }

    .menu {
        > :where(.divider, .separator) {
            margin: 3px -9px;
        }

        > .menuGroup > .menuSubHeader {
            top: 51px;
        }

        > .menuGroup:has(.filterSearch) > .menuSubHeader {
            top: 105px;
        }

        .menuItemLabel {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    .paneBody {
        margin: -9px;
    }
}

.filterBadge {
    padding-left: 6px;
    padding-right: 6px;
    background: var(--primary-50);
    border: 1px dashed var(--primary-300);
    border-radius: var(--radius-half);
    font-weight: 500;

    :local(.badgeLabel) {
        color: var(--primary-900);
    }
}

.filterButton {
    box-shadow: none;

    :local(.buttonIcon) {
        color: var(--primary-700);
        font-size: 16px;
    }
}

.filterHeader {
    position: sticky;
    margin: -9px -9px 3px;
    padding: 9px;
    top: -9px;
    background: var(--surface);
    border-bottom: 1px solid var(--surface-stroke);
    z-index: 2;

    &:first-child {
        border-top-left-radius: var(--radius);
        border-top-right-radius: var(--radius);
    }
}

.filterBack {
    flex-grow: 1;
}

.filterHeader.menuGroup .filterAction {
    min-width: 42px;
    flex: 0 0 42px;
    justify-content: center;
}

.filterDatePicker {
    margin: -9px;
}

.filterSearch {
    position: sticky;
    top: -9px;
    margin: -9px -9px 0;
    padding: 9px;
    background: linear-gradient(to bottom, var(--surface) 75%, transparent);
    z-index: 1;
}

.filterHeader + .menuGroup .filterSearch {
    top: 52px;
}

.filterBar {
    display: flex;
    flex-flow: row nowrap;
    flex-grow: 1;
    gap: 15px;
}

.filterBarSearch {
    max-width: 300px;
}