cart-progress-bar {
  display: flex;
  flex-direction: column;
  gap: 15px;

  .cart-progress__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background-color: #d9d9d9;
    border-radius: 8px;
    font-size: 10px;
  }

  .cart-progress__heading {
    font-weight: 700;
  }

  .cart-progress__container {
    position: relative;
    height: 3px;
    width: 100%;
    background-color: #d9d9d9;
    margin: 15px 0;

    &::before {
      content: '';
      display: block;
      height: 3px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      width: calc(var(--current-position) - 30px);
      transition: 0.25s ease-in-out;
      background-color: #000;
    }
  }

  .shipping,
  .gift-1,
  .gift-2,
  .gift-3 {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #d9d9d9;
    background-color: #fff;

    &.active {
      border-color: #000;
      transition: 0.1s ease-in-out;
    }

    img {
      width: 90%;
      height: 90%;
      border-radius: 50%;
      overflow: hidden;
    }

    svg {
      width: 80%;
      height: 80%;

      path {
        fill: #000;
      }
    }
  }

  .gift-1,
  .gift-2,
  .gift-3 {
    &::before {
      content: attr(data-label);
      display: block;
      position: absolute;
      top: calc(100% + 4px);
      left: 50%;
      transform: translateX(-50%);
      font-size: 8px;
      white-space: nowrap;
    }
  }

  .shipping {
    left: calc(var(--shipping-position) - 30px);
  }

  .gift-1 {
    left: calc(var(--gift-1-position) - 30px);
  }

  .gift-2 {
    left: calc(var(--gift-2-position) - 30px);
  }

  .gift-3 {
    left: calc(var(--gift-3-position) - 30px);
  }
}