.mealz-history-order {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: var(--mealz-history-order-width, 308px);
  border: 1px solid var(--mealz-ds-color-neutral-200, #D9DDE1);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  box-sizing: border-box;

  .mealz-history-order__container {
    display: flex;
    flex-direction: inherit;
    gap: 12px;
    width: 100%;
    height: 100%;

    .mealz-avatars-group {
      width: fit-content;

      .mealz-avatar {
        width: 62px;
        height: 62px;
        border: 2px solid var(--mealz-ds-color-neutral-white, #fff);
      }

      .mealz-avatar:not(:first-child) {
        margin-left: -24px;
      }

      .mealz-avatar__overflow {
        background-color: var(--mealz-ds-color-neutral-100, #F7F8F9);
        display: flex;
        justify-content: center;
        align-items: center;

        span {
          color: var(--mealz-ds-color-neutral-black, #0F191F);
          opacity: 0.7;
        }
      }
    }

    .mealz-history-order__bottom {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      gap: 12px;

      .mealz-ds-button {
        padding: 8px 16px;
        background-color: var(--mealz-ds-color-neutral-200, #EFF1F3);
      }

      span {
        line-height: 16px;
      }

      .mealz-history-order__bottom-date {
        span {
          margin-right: 4px;

          &:last-of-type {
            margin-right: 0;
          }
        }
      }
    }
  }
}

@media (max-width: 426px) {
  .mealz-history-order {
    .mealz-history-order__bottom-date span {
      display: block;
    }
  }
}