:host {
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;
  padding-bottom: var(--ux-steps-item-padding-bottom, 32px);
}
:host::before {
  background: linear-gradient(to right, #fff 0, #bbd03a 100%);
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
}
@media only screen and (width >= 768px) {
  :host::before {
    height: 3px;
  }
}

:host([generated]) {
  padding-bottom: 0;
}

.ux-steps__outer-line {
  height: 2px;
  width: 100%;
}
@media only screen and (width >= 768px) {
  .ux-steps__outer-line {
    height: 3px;
  }
}
.ux-steps__outer-line--right {
  background: linear-gradient(to right, #a6a6a6 0, #fff 100%);
}
.ux-steps__outer-line--left {
  background: linear-gradient(to right, #fff 0, #bbd03a 100%);
}
.ux-steps__indicators {
  display: flex;
}

ux-steps-item:last-of-type,
::slotted(ux-steps-item:last-of-type) {
  margin-right: 0;
}