.loading-bg-grey {
    background: var(--white);
    background: linear-gradient(to right, #647686 8%, #778a9a 18%, #647686 33%);
    background-size: $navigation-loading-background-size;
}

.loading-bg-light-grey {
    background: var(--deprecated-light-grey);
    background: linear-gradient(to right, #e9eef2 8%, #d1dbe3 18%, #e9eef2 33%);
    background-size: $navigation-loading-background-size;
}

.navigation-loading-animation {
    transform: translate3d(0, 0, 0);
    animation-name: move-background-horizontal;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

.navigation-loading-item {
    position: relative;
    max-width: 90%;
    height: var(--default-font-size);
    margin: $default-margin 0;
    background-size: $navigation-loading-background-size;
    border-radius: $navigation-loading-item-border-radius;

    @extend .navigation-loading-animation;
}

.navigation-loading-item-light-grey {
    @extend .navigation-loading-item;
    @extend .loading-bg-light-grey;
}

.navigation-loading-item-grey {
    @extend .navigation-loading-item;
    @extend .loading-bg-grey;
}

.mod-navigation-loading-bullet {
    width: var(--default-font-size);
}

.mod-sub-navigation-left-margin {
    margin-left: $navigation-horizontal-space-loading;
}

.navigation-menu-section-header.no-icon + .navigation-menu-section-items .mod-sub-navigation-left-margin {
    margin-left: $navigation-horizontal-space-no-icon;
}