.mealz-recipe-tag__container__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1;

  .mealz-recipe-tag__list__badge {
    display: flex;
    align-items: center;
    padding: 0 8px 0 0;
    height: 24px;
    border: 1px solid var(--mealz-ds-color-border, var(--mealz-ds-color-neutral-200, #d9dde1));
    box-sizing: border-box;
    border-radius: 100px;
    position: relative;
    max-width: min(100%, 50vw);
    background: var(--mealz-ds-color-background-primary, var(--mealz-ds-color-neutral-white, #fff));

    .mealz-recipe-tag__badge__icon {
      padding: 4px 8px;
      background: var(--m-color-primary, var(--mealz-ds-color-primary, #24748f));
      border-radius: 100px 0 0 100px;
      flex: none;
      order: 0;
      flex-grow: 0;
    }

    .mealz-recipe-tag__badge__text {
      margin: 0 8px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      flex: 1;
      min-width: 0;
      color: var(--mealz-ds-color-neutral-600, #4e5d6b);
    }
  }
}

.mealz-recipe-tag.mealz-ds-badge {
  cursor: pointer;
  width: fit-content;
  gap: 4px;
}

.mealz-recipe-tag.mealz-ds-badge:hover {
  background-color: var(--mealz-ds-color-background-primary-hover, var(--mealz-ds-color-primary-50, #f0f3f4));
}

mealz-modal.mealz-recipe-tag__modal-root .mealz-modal .mealz-modal__content-container .mealz-recipe-tag__container__list {
  display: flex;
  flex-flow: row wrap;
  max-width: 480px;
  padding: 24px;

  @media (max-width: 1023px) {
    flex-flow: column;
  }
}