/* -------------------------------------------
    Scroll Progress
---------------------------------------------- */

@import '../../../assets/sass/config';
@import '../../assets/sass/mixins/direction';
@import '../../assets/sass/mixins/mixins';

.scroll-progress {
	--alpha-scroll-progress-radius: 0px;
	width: 100%;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	border-radius: var(--alpha-scroll-progress-radius);
    background-color: #f4f4f4;

	&::-moz-progress-bar {
		border: 0;
		border-radius: var(--alpha-scroll-progress-radius);
		background-color: var(--alpha-primary-color);
	}
	&::-webkit-progress-bar {
		border-radius: var(--alpha-scroll-progress-radius);
		background-color: #f4f4f4;
	}
	&::-webkit-progress-value {
		border-radius: var(--alpha-scroll-progress-radius);
		background-color: var(--alpha-primary-color);
	}

    &.fixed-top, &.fixed-bottom {
        position: fixed;
        right: 0;
        left: 0;
        z-index: 1060;
        
    }
    &.fixed-top {
        top: 0;
    }
    &.fixed-bottom {
        bottom: 0;
    }

	&:focus {
		outline: none;
	}

	.admin-bar &.fixed-top {
		top: 32px;

		@media screen and (max-width: 782px) {
			top: 46px;
		}

		@media screen and (max-width: 600px) {
			top: 0
		}
	}

	&.fixed-under-header {
		display: none
	}
}

.scroll-progress-circle {
	position: fixed;
	z-index: 1299;
	#{$right}: 1.25rem;
	bottom: 1.25rem;
	width: 5rem;
	height: 5rem;
	padding: 1px;
	background: none;
	font-size: 1.6rem;
	pointer-events: auto;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .3s, transform .3s;

	&.show {
		opacity: 1;
		transform: translateY(0);
	}

	&.pos-bl, &.pos-tl {
		#{$left}: 1.25rem;
		#{$right}: auto
	}

	&.pos-tl, &.pos-tr {
		top: 1.25rem;
		bottom: auto
	}

	&.show svg {
		border-radius: 50px;
		overflow: visible
	}

	i {
		position: absolute;
		width: 80%;
		height: 80%;
		#{$left}: 10%;
		top: 10%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		border-radius: 50%;
		background-color: var(--alpha-dark-color);
		z-index: 1;
	}

	circle {
		stroke: var(--alpha-primary-color);
		stroke-width: 4px;
		stroke-linecap: round;
		stroke-dasharray: 1400;
	}

	@media (max-width: 767px) {
		display: none
	}
}
