.c8y-stepper {
  position: relative;
  display: flex;
  margin-top: 0;
  margin-bottom: 0;
  padding: @margin-base;
  list-style: none;

  &:before {
    position: absolute;
    top: 50%;
    right: 2rem;
    left: 2rem;
    z-index: 0;
    border-top: 2px solid @component-border-color;
    content: '';
  }
  > li {
    position: relative;
    margin-right: auto;
    &:last-child {
      margin-right: 0;
    }
  }
  &:not([class*='col-']) {
    margin: 0;
  }
}

.c8y-step__label {
  position: absolute;
  left: 50%;
  display: none;
  overflow: hidden;
  margin-top: 4px;
  max-width: 120px;
  color: @text-muted;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: @font-size-small;
  transform: translateX(-50%);
  @media (min-width: @screen-sm-min) {
    display: block;
  }
}

.active + .c8y-step__label {
  color: @text-color;
  font-weight: 500;
}

.c8y-step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background-color: @component-background-default;
  background-image: none;
  box-shadow: inset 0 0 0 1px @component-border-color;
  &.active {
    border-width: 3px;
    background-color: @component-color-active;
    box-shadow: none;
    color: @component-background-active;
  }
  &.step-done {
    background-color: @status-success;
    box-shadow: none;
    color: @palette-high;
  }
  &.step-error {
    background-color: @status-danger;
    box-shadow: none;
    color: @palette-high;
  }
  &.step-warning {
    background-color: @status-warning;
    box-shadow: none;
    color: @palette-high;
  }
  &:focus {
    outline: none;
  }
  .c8y-stepper--no-btns & {
    pointer-events: none;
  }
}

c8y-select-step-frame,
c8y-preview-selection-frame {
  display: contents;
}