@use '@angular/material' as mat;

.adf-filter {
    &-button:has(.adf-filter-icon) {
        margin-left: -7px;
    }

    &-icon {
        color: var(--mat-sys-on-surface);

        &-active {
            color: var(--mat-sys-primary);
        }
    }

    &-fieldset {
        border: none;
        margin: 0;
        padding: 0;
        min-inline-size: 0;
    }

    &-container {
        display: flex;
        flex-direction: column;
        padding: 15.5px 15px 10px;
        color: var(--mat-sys-on-surface);

        .adf-facet-buttons {
            display: none;
        }

        .adf-search-check-list {
            padding: 5px 0;
        }
    }

    &-title {
        font: var(--mat-sys-body-medium);
        padding: 16px 0 0 16px;
        -webkit-font-smoothing: subpixel-antialiased;
        float: none;
        width: 100%;
    }
}

.adf-search-filter-menu.adf-filter-menu {
    min-width: 260px;

    @include mat.elevation(4);

    > div:first-child {
        padding: 0;
    }

    .adf-search-checklist {
        margin: 4px 0 0 16px;
        padding: 0;
    }

    .adf-filter-actions {
        display: flex;
        justify-content: flex-end;
        padding: 15px;
        background-color: var(--mat-sys-surface-container);

        > button {
            height: 36px;
            width: auto;
            padding-left: 16px;
            padding-right: 16px;
        }
    }
}