htwkalender-pwa/frontend/public/primevue-sass-theme/theme-base/components/menu/_steps.scss

@use "sass:math";

// core
.p-steps {
  position: relative;
}

.p-steps .p-steps-list {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: flex;
}

.p-steps-item {
  position: relative;
  display: flex;
  justify-content: center;
  flex: 1 1 auto;
  overflow: hidden;
}

.p-steps-item .p-menuitem-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
}

.p-steps.p-steps-readonly .p-steps-item {
  cursor: auto;
}

.p-steps-item.p-steps-current .p-menuitem-link {
  cursor: default;
}

.p-steps-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.p-steps-number {
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-steps-title {
  display: block;
}

// theme
.p-steps {
  .p-steps-item {
    .p-menuitem-link {
      background: transparent;
      transition: $listItemTransition;
      border-radius: $borderRadius;
      background: $stepsItemBg;
      outline-color: transparent;

      .p-steps-number {
        color: $stepsItemNumberColor;
        border: $stepsItemBorder;
        background: $stepsItemBg;
        min-width: $stepsItemNumberWidth;
        height: $stepsItemNumberHeight;
        line-height: $stepsItemNumberHeight;
        font-size: $stepsItemNumberFontSize;
        z-index: 1;
        border-radius: $stepsItemNumberBorderRadius;
      }

      .p-steps-title {
        margin-top: $inlineSpacing;
        color: $stepsItemTextColor;
      }

      &:not(.p-disabled):focus-visible {
        @include focused();
      }
    }

    &.p-highlight {
      .p-steps-number {
        background: $highlightBg;
        color: $highlightTextColor;
      }

      .p-steps-title {
        font-weight: $stepsItemActiveFontWeight;
        color: $textColor;
      }
    }

    &:before {
      content: " ";
      border-top: $divider;
      width: 100%;
      top: 50%;
      left: 0;
      display: block;
      position: absolute;
      margin-top: math.div(-1 * $stepsItemNumberHeight, 2);
    }
  }
}