.mealz-preferences-search__not-found {
  padding: 12px 16px;
}

.mealz-preferences-search__searchbar-container {
  margin: 0 16px 24px 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.mealz-preferences-search__searchbar {
  background-color: var(--mealz-ds-color-neutral-white, #fff);
  border: 1px solid var(--mealz-ds-color-neutral-200, #D9DDE1);
  border-radius: 6px;
  font-size: 14px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  min-height: 40px;
  transition: border-color 0.1s ease, border-width 0.1s ease;

  &:focus-within {
    border: 2px solid var(--mealz-ds-color-primary, #24748F);
  }

  .mealz-preferences-search__search-img {
    position: absolute;
    left: 8px;
    height: 20px; 
    width: 20px;
    z-index: 1;
    filter: brightness(0);
  }

  .mealz-preferences-search__searchbar-input {
    border: transparent;
    background: transparent;
    flex: 1;
    text-overflow: ellipsis;
    padding: 0 0 0 36px;
    font-size: 14px;
    color: var(--mealz-ds-color-neutral-black, #0f191f);
    line-height: 1.2;

    &::placeholder {
      color: var(--mealz-ds-color-text-disabled, #b3bac3);
      opacity: 1;
    }

    &:focus {
      outline: transparent;
    }
  }
}

.mealz-preferences-search__suggested__tag {
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  width: 100%;
  text-align: start;
  padding: 12px 16px;
  border-bottom: 1px solid var(--mealz-ds-color-neutral-200, #D9DDE1);
  color: var(--mealz-ds-color-neutral-black, #0F191F);
}