@progression-icon-size:        @font-size-large * 3;
@progression-icon-font-size:   @font-size-large;
@progression-indent-width:     40px;
@progression-lines-width:      2px;
@progression-lines-color:      @brand-primary;
@progression-endpoint-size:    @font-size-large;
@progression-link-color:       @text-color;
@progression-link-hover-color: @gray;

.progression-list {
    position: relative;
    list-style-type: none;
    padding: 0;
    margin-bottom: @component-margin-bottom;
    margin-top: @component-margin-bottom;

    &:before {
        z-index: 1;
        content: " ";
        position: absolute;
        border-left: @progression-lines-width solid @progression-lines-color;
        top: @progression-endpoint-size / 2;
        bottom: @progression-endpoint-size / 2;
        left: @progression-icon-size / 2 - @progression-lines-width / 2;
    }
}

.progression-row-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: row;

    .progression-row-content {
        display: flex;
        align-items: center;
    }

    .root-content {
        font-weight: bold;
    }

    .progression-row-icon {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid transparent;
        border-radius: 50%;
        font-size: @progression-icon-font-size;
        width: @progression-icon-size;
        height: @progression-icon-size / 2;
    }

    .progression-opening-url {
        color: @progression-link-color;
    }

    .progression-opening-url:hover {
        color: @progression-link-hover-color;
    }

    .progression-indent {
        width: @progression-indent-width;
    }

    .progression-row-variant(@progression-lines-color, @body-bg, @body-bg);
}

.progression-row-variant(@color, @bg-color, @border-color) {
    .progression-row-icon {
        color: @color;
        border-color: @border-color;
        background: @bg-color;
    }

    .progression-row-no-icon {
        border-color: transparent;
        background: transparent;
    }
}