.mealz-catalog-toolbar {
  position: relative;
  display: flex;
  box-sizing: border-box;
  padding: 16px 80px;
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
  background-color: var(--mealz-ds-color-neutral-white, #fff);
  transition: padding 0.3s ease;
  overflow-x: visible;
  overflow-y: visible;


  .mealz-recipe-catalog__toolbar-container-anchor {
    width: 100%;
  }

  .mealz-catalog-toolbar__buttons-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    gap: 8px;

    .mealz-catalog-toolbar__searchbar {
      background-color: var(--mealz-ds-color-background-primary, #FFF);
      border: 1px solid var(--mealz-ds-color-border, #E0E0E0);
      border-radius: 999px;
      font-size: 14px;
      display: flex;
      align-items: center;
      padding: 8px 16px;
      box-sizing: border-box;
      transition: width 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;

      &.expanded {
        padding: 8px;
        border: solid 2px var(--mealz-ds-color-primary, #24748f);
      }

      &:not(.expanded) {
        input {
          display: none;
        }
      }

      &.my-space {
        padding: 8px;
        width: 312px;
        border: 1px solid var(--mealz-ds-color-border, #E0E0E0);

        input {
          img {
            height: 20px;
            width: 20px;
          }
        }

        @media (max-width: 1023px) {
          width: 100%;
          flex: 1;
        }
      }

      &:not(.my-space).expanded {
        width: 200px;
      }

      input {
        border: transparent;
        background: transparent;
        width: 100%;
        text-overflow: ellipsis;

        &::placeholder {
          color: var(--mealz-ds-color-text-disabled, #B3BAC3);
          opacity: 1;
          font-weight: 400;
        }

        &:focus {
          outline: transparent;
        }
      }

      .mealz-ds-button {
        padding: unset;

        &:hover {
          border-color: transparent;
        }

        img {
          height: 24px;
          width: 24px;
        }
      }

      .mealz-catalog-toolbar__searchbar-clear {
        margin-left: 8px;

        img {
          height: 20px;
          width: 20px;
        }

        &.hidden {
          display: none;
        }
      }
    }

    .mealz-catalog-toolbar__controls__favorites {
      &.hidden {
        display: none;
      }

      &.history img {
        height: 20px;
        width: 20px;
      }
    }

    .mealz-recipe-toolbar__return-button {
      width: 24px;
      height: 24px;

      img {
        cursor: pointer;
        min-width: 15px;
        min-height: 15px;
      }

      &.hidden {
        display: none;
      }
    }
  }

  .mealz-catalog-toolbar__controls__discount,
  .mealz-catalog-toolbar__controls__preferences,
  .mealz-catalog-toolbar__controls__favorites {
    position: relative;

    &.mealz-ds-button {
      display: inline-flex;
      width: max-content;
      align-items: center;
      padding: 8px 16px;
      gap: 8px;
      color: var(--mealz-ds-color-neutral-black, #0F191F);
      background-color: var(--mealz-ds-color-background-primary, #FFF);
      border: 1px solid var(--mealz-ds-color-border, #E0E0E0);
      border-radius: 999px;
      text-decoration: none;

      img {
        height: 24px;
        width: 24px;
      }
    }
  }

  &.history {
    justify-content: space-between;
  }

  .mealz-recipe-toolbar__history-switch {
    display: flex;
    padding: 4px;
    align-items: center;
    border-radius: 4px;
    border: 1px solid var(--mealz-ds-color-neutral-200, #D9DDE1);
    background: var(--mealz-ds-color-neutral-50, #F7F8F9);

    .mealz-recipe-toolbar__history-switch__grid {
      margin-right: 8px;
    }
    
    .mealz-recipe-toolbar__history-switch__list,
    .mealz-recipe-toolbar__history-switch__grid {
      display: inline-flex;
      padding: 4px;

      img {
        width: 24px;
        height: 24px;
      }

      &.active {
        border-radius: 4px;
        background: var(--mealz-ds-color-neutral-white, #FFF);
        box-shadow: 0px 1px 4px 0px rgba(15, 25, 31, 0.12);
      }
    }
  }

  .mealz-catalog-toolbar__controls__preferences {
    .mealz-catalog-toolbar__controls__count-badge {
      height: 24px;
      width: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #e4edf1;
      color: var(--mealz-ds-color-primary, #24748F);
      border-radius: var(--m-border-radius-circle, 50%);
      font-size: 12px;
      line-height: 20px;
    }

    .mealz-catalog-toolbar__loader {
      .mealz-loader {
        margin: 0px;
        height: 18px;
        width: 18px;
        border-top: var(--mealz-loader-thickness, 5px) solid
          var(--mealz-ds-color-primary-900, #10323f);
      }
    }

    .hidden {
      display: none;
    }
  }

  @media (max-width: 1023px) {
    .mealz-catalog-toolbar__searchbar.my-space {
      width: 100%;
      flex: 1;
    }

  }
}

/* STICKING CSS RULES */
.mealz-catalog-toolbar.sticking {
  position: fixed;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--mealz-ds-color-neutral-200, #eff1f3);
  padding: 16px 40px;

  @media (max-width: 700px) {
    padding: 8px;
  }

  .mealz-catalog-toolbar__buttons-container {
    @media (max-width: 700px) {
      gap: 12px;
    }

    .mealz-ds-button {
      img {
        width: 24px;
        height: 24px;
      }
    }
  }
}

@media (max-width: 1023px) {
  .mealz-catalog-toolbar {
    padding: 24px 16px 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }

    &.sticking {
      padding: 8px 24px;
    }
  }
}

@media (max-width: 700px) {
  .mealz-catalog-toolbar {
    padding: 24px 16px;
  }
}