.pizzabar {
  display: flex;
  align-items: center;
  max-width: 80%;
  margin: 1rem auto 5rem;
  .pizzabar-step {
    position: relative;
  }
  .pizzabar-step-text {
    position: absolute;
    text-align: center;
    width: max-content;
    max-width: 7rem;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    height: 4.5rem;
    display: flex;
    flex-direction: column;
  }
  .pizzabar-step-text .step-date {
    margin-top: auto;
  }
  .pizzabar-line {
    width: 100%;
    height: 1px;
    background-color: black;
  }
  @media (max-width: 767px) {
    flex-direction: column;
    width: fit-content;
    height: 20rem;
    margin: auto 0 0 2rem;
    .pizzabar-step,
    .pizzabar-step .pizzabar-icon {
      width: 60px;
      height: 60px;
    }
    .pizzabar-step-text {
      height: fit-content;
      max-width: unset;
      right: 130%;
      top: 25%;
      transform: translateY(-15%);
      text-align: right;
    }
    .pizzabar-line {
      width: 1px;
      height: 100%;
    }
  }
}

.pizzabar[data-current="4"] {
  .pizzabar-1,
  .pizzabar-2,
  .pizzabar-3,
  .pizzabar-4 {
    .pizzabar-icon-background {
      fill: #e21836;
      stroke: #e21836;
    }
    .pizzabar-icon-inner {
      fill: white;
    }
  }
  .pizzabar-line {
    background-color: #e21836;
  }
}

.pizzabar[data-current="3"] {
  .pizzabar-3 .pizzabar-icon-background {
    stroke: #e21836;
  }
  .pizzabar-3 .pizzabar-icon-inner {
    fill: #e21836;
  }
  
  .pizzabar-1,
  .pizzabar-2 {
    .pizzabar-icon-background {
      fill: #e21836;
      stroke: #e21836;
    }
    .pizzabar-icon-inner {
      fill: white;
    }
  }
  .pizzabar-1 + .pizzabar-line,
  .pizzabar-2 + .pizzabar-line {
    background-color: #e21836;
  }
}

.pizzabar[data-current="2"] {
  .pizzabar-2 .pizzabar-icon-background {
    stroke: #e21836;
  }
  .pizzabar-2 .pizzabar-icon-inner {
    fill: #e21836;
  }

  .pizzabar-1 {
    .pizzabar-icon-background {
      fill: #e21836;
      stroke: #e21836;
    }
    .pizzabar-icon-inner {
      fill: white;
    }
  }
  .pizzabar-1 + .pizzabar-line {
    background-color: #e21836;
  }
}

.pizzabar[data-current="1"] {
  .pizzabar-icon-1 .pizzabar-icon-background {
    stroke: #e21836;
  }
  .pizzabar-icon-1 .pizzabar-icon-inner {
    fill: #e21836;
  }
}