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

.adf-search-form {
    &.adf-search-form-button {
        place-content: center space-between;
        display: flex;
        padding: 0 14px 0 16px;
        height: 35px;
        max-width: 190px;
        min-width: 190px;
        overflow: hidden;

        > span:first-child {
            display: flex;
            align-items: center;
        }
    }

    &-title {
        max-width: 120px;
        min-width: 120px;
        font-size: var(--theme-body-1-font-size);
        line-height: 24px;
        padding-right: 12px;
        text-overflow: ellipsis;
        overflow: hidden;
        text-align: left;
    }

    .adf-search-form-icon#{ms.$mat-icon} {
        font-size: 24px;
        height: 24px;
        width: 24px;
        border: 2px solid transparent;
        border-radius: 6px;
        transition: border 500ms ease-out;
    }

    &-icon-selected {
        border-color: var(--theme-accent-color);
    }
}

.adf-search-form-menu {
    @include mat.elevation(2);

    border-radius: 6px;

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