.order-process {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-bottom: 20px;

  &__item {
    z-index: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    flex-grow: 0;
    width: auto;
    height: auto;
    border-radius: 50%;

    &.completed {
      .shipment-icon {
        background: $blue-dark;

        .icon {
          color: $white;
        }
      }
    }

    &:first-child {
      align-items: flex-start;
      position: initial;

      .order-process__title {
        text-align: left;
        left: 0;
        transform: translateX(0);
      }
    }

    &:last-child {
      align-items: flex-end;
      position: initial;

      .order-process__title {
        text-align: right;
        left: auto;
        right: 0;
        transform: translateX(0);
      }
    }
  }

  .shipment-icon {
    width: 24px;
    height: 24px;
    background: $gray-light;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;

    .icon {
      color: $warm-grey;
      font-size: .675rem;
    }
  }

  &__title {
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 28px;
    text-align: center;
  }

  &__line {
    height: 2px;
    flex-grow: 1;
    max-width: 100%;
    background: $gray-light;

    &.completed {
      background: $blue-dark;
    }
  }
}

@include media-breakpoint-only(xs) {
  .order {
    &-process:has(.order-process__item:nth-of-type(7)) {
      padding-bottom: 36px;

      .order-process__item {
        position: relative;
      }
    }

    &:has(.order-process__item:nth-of-type(5)) {
      .order__collection {
        max-width: 275px;
      }

      .order__delivery {
        max-width: 275px;

        &-text .store-name {
          white-space: nowrap;
        }
      }
    }
  }
}

@include media-breakpoint-up(sm) {
  .order-process {
    .shipment-icon {
      width: 32px;
      height: 32px;

      .icon {
        font-size: .875rem;
      }
    }

    &__line {
      height: 4px;
    }

    &__title {
      padding-top: 36px;
      min-width: 110px;
    }
  }
}