/* ==========================================================================
   Progress Bar shortcode styles
   ========================================================================== */

.qodef-progress-bar {
	@include qodefRelativeLayout();
	visibility: hidden;
	
	.qodef-m-inner {
		position: relative;
		display: flex;
		flex-direction: column;
	}
	
	.qodef-m-canvas {
		@include qodefRelativeLayout();
		
		svg {
			display: block;
		}
	}
	
	.qodef-m-title {
		margin: 20px 0 0;
	}
	
	&.qodef--init {
		visibility: visible;
	}
	
	&:not(.qodef-layout--line) {
		
		.progressbar-text {
			@include qodefAbsoluteLayout();
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0;
			margin: 0;
			@include qodefHeadingStyle('h5');
		}
	}
	
	&.qodef-layout--semi-circle {
		
		.progressbar-text {
			padding-top: 20px;
			transform: none !important;
		}
	}
	
	&.qodef-layout--line {
		
		.qodef-m-inner {
			flex-direction: column-reverse;
		}
		
		.proggress {
			width: 0;
		}
		
		.percentCount {
			position: absolute;
			top: -26px;
			right: 0;
			width: auto;
			font-size: 21px;
			line-height: 1;
			color: $heading-color;
		}
		
		.qodef-m-title {
			margin: 0 0 3px;
		}
		
		&.qodef-percentage--floating {
			
			.percentCount {
				left: 0;
				right: auto;
				transform: translateX(-50%);
			}
		}
	}
}