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

adf-search-filter-tabbed {
    #{ms.$mat-tab-header} {
        margin-top: 0;
    }

    .adf-search-tab-label-active {
        border-bottom: 1px solid var(--theme-primary-color);

        #{ms.$mat-tab-label-text} {
            color: var(--adf-theme-foreground-secondary-text-color);
        }
    }

    // The important tag is used here as a workaround for a bug in angular material, when MatTabs are used in conjunction with MatMenu
    // https://github.com/angular/components/issues/27426
    /* stylelint-disable declaration-no-important */
    .adf-search-tab-content-active {
        & > div {
            visibility: visible !important;
            display: block !important;
        }
    }
}