// General
// =======
.pagelevelprogress-indicator-bar {
    transition: width 0.3s ease-in;
}

// Navigation PLP
// ==============

.pagelevelprogress-navigation.base {
    padding: @navigation-padding;

    .no-touch &:hover {

        .pagelevelprogress-indicator {
            background-color: @navigation-progress-background-color-hover;
            border-color: @navigation-progress-border-color;
        }

        .pagelevelprogress-indicator-inner {
            border-color: @navigation-progress-background-color-hover;
        }

        .pagelevelprogress-indicator-bar {
            background-color: @navigation-progress-color-hover;
        }

        .page-level-progress-plus-icon {
            color: @navigation-progress-color;
        }
    }

    .pagelevelprogress-indicator {
        transition: all 0.3s ease-in;
        background-color: @navigation-progress-background-color;
        border: 2px solid @navigation-progress-border-color;
        border-radius: 50px;
    }

    .pagelevelprogress-indicator-inner {
        border: 1px solid @navigation-progress-background-color;

    }

    .pagelevelprogress-indicator-bar {
        left: 0;
        background-color: @navigation-progress-color;


        .dir-rtl & {
            right: 0;
            left: auto;
        }
    }
}

// Drawer PLP
// ==========

.drawer {
    .pagelevelprogress-item-title {
        background-color: @drawer-item-color;
        color: @drawer-item-text-color;

        &.drawer-item-open.disabled {
            background-color: @drawer-item-color-disabled;
            color: @drawer-item-text-color-disabled;
            font-size: @button-text-font-size;
            font-weight: @font-weight-light;

            .no-touch &:hover {
                background-color: @drawer-item-color-disabled;
                color: @drawer-item-text-color-disabled;
                .page-level-progress-indicator {
                    background-color: transparent;
                }
            }
        }

        .pagelevelprogress-indicator {
            width: 15%;
            background-color: @drawer-item-color;
            border-color: @drawer-progress-color;
        }

        .pagelevelprogress-indicator-inner {
            border-color: @drawer-item-color;
        }

        .pagelevelprogress-indicator-bar {
            background-color: @drawer-progress-color;
        }

        .no-touch &:hover {
            background-color: @drawer-item-color-hover;
            color: @drawer-item-text-color-hover;

            .pagelevelprogress-indicator {
                background-color: @drawer-item-color-hover;
                border-color: @drawer-progress-color-hover;
            }

            .pagelevelprogress-indicator-inner {
                border-color: @drawer-item-color-hover;
            }

            .pagelevelprogress-indicator-bar {
                background-color: @drawer-progress-color-hover;
            }

        }
    }
}

// Header indicators
// =================
.menu-header,
.page-header {

    .pagelevelprogress-indicator {
        background-color: @background-color-inverted;
        border-color: @navigation-progress-background-color;
    }

    .pagelevelprogress-indicator-inner {
        border-color: @background-color-inverted;
    }

    .pagelevelprogress-indicator-bar {
        background-color: @navigation-progress-background-color;
    }
}

// Page, Article, Block and Component PLP
// ======================================
.page,
.article,
.block,
.component {

    .pagelevelprogress-indicator {
        background-color: @navigation-progress-background-color;
        border-color: @navigation-progress-border-color;
    }

    .pagelevelprogress-indicator-inner {
        border-color: @navigation-progress-background-color;
    }

    .pagelevelprogress-indicator-bar {
        background-color: @navigation-progress-color;
    }
}