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

.adf-search-filter-chip,
.adf-search-filter-chip-tabbed {
    height: 32px;
    max-width: 320px;
    text-overflow: ellipsis;
    overflow: hidden;
    background: var(--adf-theme-background-unselected-chip-color);

    &.adf-search-toggle-chip {
        background: var(--adf-theme-background-card-color);
        border: 2px solid var(--theme-primary-color);
    }

    .adf-search-filter-placeholder {
        flex: 1 1 auto;
        white-space: nowrap;
        color: var(--adf-theme-foreground-disabled-text-color);
    }

    &.adf-search-filter-facet-chip::after {
        background: var(--adf-theme-background-unselected-chip-color);
        color: unset;
    }

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

    .adf-filter-value {
        font-weight: 500;
    }

    .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);
    }
}

.adf-search-filter-chip#{ms.$mat-evolution-chip}#{ms.$mat-standard-chip} {
    margin-top: 0;
    margin-bottom: 0;
}

#{ms.$mat-standard-chip} {
    -webkit-font-smoothing: unset;
}

#{ms.$mat-evolution-chip-set} {
    margin-top: -4px;
}