/// @deprecated the prefix coveo is no longer used.
.coveo-filter-container,
.filter-container {
    --container-width: 320px;
    --border-color: var(--grey-40);
    --background-color: var(--white);
    --icon-color: var(--grey-80);

    position: relative;
    align-items: center;
    justify-content: center;
    width: var(--container-width);
    height: 40px;
    padding: 10px 16px;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;

    &:hover {
        --border-color: var(--grey-50);
    }

    &:focus-within {
        --border-color: var(--digital-blue-60);

        box-shadow: 0 0 0 4px var(--digital-blue-20);
    }

    &.disabled {
        --background-color: var(--grey-20);
        --icon-color: var(--grey-60);

        pointer-events: none;
    }

    &.mod-small {
        --container-width: $filter-box-width-mod-small;

        input.filter-box {
            width: $filter-box-width-mod-small;
        }
    }

    > .filter-box-icon {
        position: relative;
        color: var(--grey-100);

        &.hidden {
            display: none;
        }

        &.clear-icon {
            cursor: pointer;
        }
    }

    input.filter-box {
        position: relative;
        width: 100%;
        padding: 0;
        border: none;

        &:focus {
            outline: none;
        }
    }
}