@use '@angular/material' as mat;

.adf-search-filter-chip,
.adf-search-filter-chip-tabbed {
    height: 32px;
    max-width: 320px;
    text-overflow: ellipsis;
    overflow: hidden;
    background: var(--mat-sys-surface-variant);

    &.adf-search-toggle-chip {
        background: var(--mat-sys-surface);
        border: 2px solid var(--mat-sys-primary);
    }

    .adf-search-filter-placeholder {
        flex: 1 1 auto;
        white-space: nowrap;
        opacity: 0.38;
        color: var(--mat-sys-on-surface);
    }

    &.adf-search-filter-facet-chip::after {
        background: var(--mat-sys-surface-variant);
        color: unset;
    }

    .adf-search-filter-ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .adf-filter-value {
        font: var(--mat-sys-body-medium);
    }

    .adf-search-filter-chip-icon {
        padding-left: 5px;
    }

    &-menu + * .adf-search-filter-chip-menu-panel {
        min-width: 320px;
        border-radius: 12px;

        @include mat.elevation(2);
    }
}