@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);
        }
    }
}
