@-webkit-keyframes zy-stripes-animation {
    from {
        background-position: var(--stripe-size) 0;
    }

    to {
        background-position: 0 0;
    }
}

@keyframes zy-stripes-animation {
    from {
        background-position: var(--stripe-size) 0;
    }

    to {
        background-position: 0 0;
    }
}

.zyre-addon-skill-bar .zyre-progress-item {
	margin-top: 45px;
}

body:not(.rtl) .zyre-addon-skill-bar .zyre-progress-number-mark {
	--translate-x: -100%;
}

body.rtl .zyre-addon-skill-bar .zyre-progress-number-mark {
	--translate-x: 100%;
}

.zyre-addon-skill-bar .zyre-progress-number-mark {
    transform: translateX(var(--translate-x));
}

.zyre-addon-skill-bar .zyre-progress-bg {
    height: 15px;
    background: #E6EBF2;
    border-radius: 8px;
}

.zyre-addon-skill-bar .zyre-progress-fill {
	--stripe-color: rgba(255, 255, 255, 0.15);
	--stripe-size: 1rem;
	--stripe-angle: 135deg;
	--stripe-animation-duration: 1500ms;
    height: 15px;
    background: var(--zy-primary);
    width: 0%;
    border-radius: 8px;
}

.zyre-addon-skill-bar .zyre-progress-striped {
    background-image: linear-gradient(var(--stripe-angle), var(--stripe-color) 32%, transparent 32%, transparent 50%, var(--stripe-color) 50%, var(--stripe-color) 82%, transparent 75%, transparent);
    background-size: var(--stripe-size) var(--stripe-size);
}

.zyre-addon-skill-bar .zyre-progress-animated {
	-webkit-animation: zy-stripes-animation var(--stripe-animation-duration) linear infinite;
    animation: zy-stripes-animation var(--stripe-animation-duration) linear infinite;
}

.zyre-addon-skill-bar .zyre-progress-number-mark {
	--progress-number-bg: transparent;
	--arrow-border-left: 10px;
	--arrow-border-top: 6px;
	--arrow-border-right: 0px;
	font-size: 16px;
	background-color: var(--progress-number-bg);
}

.zyre-addon-skill-bar .zyre-progress-number-arrow::after {
	content: "";
    border-left: var(--arrow-border-left) solid transparent;
    border-right: var(--arrow-border-right) solid transparent;
    border-top: var(--arrow-border-top) solid var(--progress-number-bg);
    position: absolute;
    left: calc(100% - ((var(--arrow-border-left) + var(--arrow-border-right)) / 2));
    top: 100%;
    transform: translateX(-50%);
}

body.rtl .zyre-addon-skill-bar .zyre-progress-number-arrow::after {
	left: 0;
	transform: translateX(0);
}