&.style-stripe,
&.style-bar {
    width: 100%;

    .stripe-indicator {
        position: relative;
        height: 4px;

        div {
            height: 100%;
            position: relative;
            overflow: hidden;
            background-color: @brand-primary;

            &:after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                z-index: 1;
                overflow: hidden;
                background-image: linear-gradient(
                    -45deg,
                    rgba(255, 255, 255, .3) 25%,
                    transparent 25%,
                    transparent 50%,
                    rgba(255, 255, 255, .3) 50%,
                    rgba(255, 255, 255, .3) 75%,
                    transparent 75%,
                    transparent
                );
                background-size: 50px 50px;
                -webkit-animation: moveStripes 2s linear infinite;
                animation: moveStripes 2s linear infinite;
            }
        }

        @-webkit-keyframes moveStripes {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: 50px 50px;
            }
        }

        @keyframes moveStripes {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: 50px 50px;
            }
        }
    }
}

&.orientation-vertical {
    &.style-bar,
    &.style-stripe {
        .stripe-indicator {
            height: 100%;
            width: 4px;

            > div {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;

                &:after {
                    transform: rotateX(180deg);
                }
            }
        }
    }
}