.free-shipping-bar {
  display: flex;
  flex-direction: column;
  row-gap: 10px;

  .drawer & {
    margin: 50px 0 40px;
  }

  .cart-page & {
    margin-bottom: 32px;
  }
}

.progress-bar {
  position: relative;
  display: block;
  width: 100%;
  height: 2px;
  background-color: rgb(var(--layout-text-color));

  &::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    height: 100%;
    animation: grow-width 2.5s forwards;
  }

  &.progress-bar--complete::after {
    background-color: var(--complete-color);
  }

  &.progress-bar--in-progress::after {
    background-color: var(--progress-color);
  }
}  

@keyframes grow-width {
  100% {
    width: min(var(--progress-bar-width, 100%), 100%)
  }
}