.ob__search-container {
    position: relative;
    display: flex;
    align-items: center;
    width: max-content;
}

.ob__search-input {
    padding: 8px 30px 8px 39px; /* Добавляем отступ слева для иконки лупы */
    border: 1px solid #D1D4D7;
    border-radius: 6px;
    flex: 1;
}

.ob__search-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 2; /* Установим выше текстового поля */
    color: #999;
}

    .ob__search-icon:hover {
        color: #555;
    }

.ob__search-icon-search {
    left: 8px; /* Расположение иконки лупы слева */
}

.ob__search-icon-clear {
    right: 8px; /* Расположение крестика справа */
    display: none; /* Изначально скрываем крестик */
}

.ob__search-input:not(:focus) + .ob__search-icon-clear {
    display: block; /* Показываем крестик, когда input не в фокусе и содержит текст */
}

input.ob__search-input:focus-visible {
    outline: none;
    border: 1px solid #008F91;
}

input.ob__search-input:hover {
    border-color: #333839;
}

.ob__search-container.disabled {
    opacity: 0.6;
}

    .ob__search-container.disabled * {
        cursor: auto;
    }

    .ob__search-container.disabled input:hover {
        border-color: #D1D4D7;
        /* border: 0; */
    }

input.ob__search-input.ob__search-input__error {
    border-color: red;
}

    input.ob__search-input.ob__search-input__error:hover {
        border-color: #333839;
    }

    input.ob__search-input.ob__search-input__error:focus-visible {
        outline: none;
        border: 1px solid #008F91;
    }