@use '@angular/material' as mat;
@use '../../../mat-selectors.scss' as ms;

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

    &-icon {
        opacity: 1;
        color: var(--adf-theme-foreground-icon-color);

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

    &-container {
        display: flex;
        flex-direction: column;
        padding: 15.5px 15px 10px;
        color: var(--adf-theme-foreground-text-color-087);

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

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

        input {
            background: 2px solid var(--adf-theme-background-card-color);
        }
    }

    &-title {
        font-size: 1.1em;
        padding-bottom: 5px;
        color: var(--adf-theme-foreground-text-color-087);
        -webkit-font-smoothing: subpixel-antialiased;
    }
}

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

    @include mat.elevation(4);

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

    .adf-filter-actions {
        display: flex;
        justify-content: flex-end;
        padding: 15px;
        background-color: var(--adf-theme-background-hover-color);

        > button {
            font-size: 0.9em;
            height: 36px;
            width: auto;
            padding-left: 16px;
            padding-right: 16px;
            -webkit-font-smoothing: subpixel-antialiased;

            #{ms.$mat-button-label} {
                font-weight: unset;
            }
        }
    }
}