.steps {
  display: block;
  list-style: none;
  margin: $steps-top-bottom-space 0;
  overflow-x: auto;
  padding: 0;
  position: relative;
  white-space: nowrap;
  width: 100%;

  svg.embla-icon {
    height: 1em;
    fill: $steps-font-color;
  }
}

.steps::before {
  border-bottom: $steps-line-size solid $steps-border-color;
  content: '';
  display: block;
  font-size: $steps-line-size;
  left: 0;
  line-height: 0;
  position: absolute;
  top: ($steps-font-size - ($steps-line-size / 2) + $steps-item-margin-top-bottom);
  width: 100%;
  z-index: 0;
}

.steps__item {
  display: inline-block;
  list-style: none;
  margin: $steps-item-margin-top-bottom 0;
  padding: 0 $steps-min-space-between-steps;
  text-align: center;
}

.steps__item__link {
  background: $steps-step-background;
  border-radius: 50%;
  color: $steps-font-color;
  display: inline-block;
  font-size: $steps-font-size;
  height: $steps-font-size * 2;
  line-height: 1;
  padding: ($steps-font-size / 2) 0;
  position: relative;
  width: $steps-font-size * 2;
  z-index: 1;

  &:focus {
    outline: 0;
    box-shadow: $outline-box-shadow rgba($steps-focus-color, $outline-border-opacity);
  }

  &:hover {
      color: $steps-font-color;
      background-color: $steps-hover-background-color;
      text-decoration: none;
  }
}

.steps__item__title {
  font-weight: $font-weight-bold;
  margin: .5em 0;
}

.steps__item__content {
  margin: .5em 0;
}

// Modifier: Justified
.steps--justified {
  display: flex;
  flex-wrap: nowrap;

  > * {
    flex: 1 1 100%;
  }
}