.mealz-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;

  &.bi-color {
    padding: 0;
  }

  &.floating {
    background: var(--mealz-ds-color-neutral-white, #fff);
    border-radius: 120px;
    padding: 8px 12px;
    
    .mealz-counter__counter {
      button {
        padding: 0;
        width: 20px;
        height: 20px;
      }
    }
  }

  .mealz-counter__counter {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    gap: 8px;

    .mealz-counter__value-container {
      display: flex;
      width: 32px;
      justify-content: center;
      align-items: center;
      gap: 4px;

      .mealz-counter__value-text {
        color: var(--mealz-ds-color-neutral-black, #0F191F);
      }

      .mealz-counter__people-button {
        display: flex;
        justify-content: center;
        align-items: center;

        .mealz-counter__people-icon {
          height: 18px;
          width: 18px;
        }
      }
    }
  }
}