.wp-block-themeisle-blocks-progress-bar {
	--percentage: 50%;
	--title-color: inherit;
	--percentage-color: rgba(0, 0, 0, 0.4);
	--percentage-color-outer: inherit;
	--percentage-color-tooltip: #FFF;
	--percentage-color-append: #FFF;
	--background-color: #EEE;
	--border-radius: 5px;
	--height: 30px;
	--font-size: calc( var( --height ) * 0.65 );
	--bar-background: #6adcfa;
	--title-font-size: var(--font-size);

	display: flex;
	flex-direction: column;

	&.has-tooltip {
		margin-top: 43px;
	}

	.wp-block-themeisle-blocks-progress-bar__area {
		position: relative;
		width: 100%;
		display: block;
		margin-bottom: 15px;
		width: 100%;
		background: var( --background-color );
		height: var( --height );
		border-radius: var( --border-radius );
		transition: 0.4s linear;
		transition-property: width, background-color;
	}

	.wp-block-themeisle-blocks-progress-bar__progress {
		display: flex;
		align-items: center;
		position: absolute;
		right: 10px;
		top: 0;
		font-size: var( --font-size );
		height: var( --height );
		line-height: 30px;
		color: var( --percentage-color );
	}

	.wp-block-themeisle-blocks-progress-bar__area__bar {
		height: var( --height );
		width: 0px;
		background: var( --bar-background);
		border-radius: var( --border-radius );
		opacity: 0;

		&.show {
			opacity: 1;
		}
	}

	.wp-block-themeisle-blocks-progress-bar__progress__append {
		display: flex;
		align-items: center;
		position: relative;
		justify-content: flex-end;
		right: 10px;
		left: 0px;
		top: 0;
		font-size: var( --font-size );
		margin-right: 5px;
		height: var( --height );
		line-height: 30px;
		color: var( --percentage-color-append );
		opacity: 0;

		&.show {
			opacity: 1;
		}
	}

	.wp-block-themeisle-blocks-progress-bar__area__tooltip {
		font-size: 12px;
		min-width: 40px;
		float: right;
		bottom: 40px;
		left: 20px;
		color: var( --percentage-color-tooltip );
		transition: all 1s;
		position: relative;
		padding: 4px 10px 7px 10px;
		background-color: var(--bar-background);
		border-radius: 2px;
		line-height: 20px;
		opacity: 0;
		font-size: clamp(12px, var(--title-font-size), 26px );
		text-align: center;

		&.show {
			opacity: 1;
		}
	}

	.wp-block-themeisle-blocks-progress-bar__area__arrow {
		width: 0;
		height: 0;
		position: absolute;
		content: "";
		bottom: -5px;
		left: 0;
		right: 0;
		margin: auto;
		display: block;
		border-style: solid;
		border-width: 5px 5px 0 5px;
		border-color: var(--bar-background) transparent transparent transparent;
	}

	.wp-block-themeisle-blocks-progress-bar__area__title {
		position: absolute;
		top: 0;
		left: 0;
		width: auto;
		font-weight: bold;
		font-size: var( --font-size );
		height: var( --height );
		color: #ffffff;
		background: transparent;
		border-radius: var( --border-radius ) 0px 0px var( --border-radius );

		&.highlight {
			background: var( --bar-background );

			span {
				color: var( --title-color );
				background: rgba(0, 0, 0, 0.1);
			}
		}

		span {
			color: var( --title-color );
			display: flex;
			align-items: center;
			border-radius: var( --border-radius ) 0px 0px var( --border-radius );
			width: 100%;
			background: transparent;
			padding: 0 20px;
			height: var( --height );
			line-height: 30px;
		}
	}

	.wp-block-themeisle-blocks-progress-bar__outer {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.wp-block-themeisle-blocks-progress-bar__outer__title {
		color: var( --title-color );
		margin: 0px;
		display: grid;
		align-items: center;
		font-size: max( var( --title-font-size ), 12px );
		line-height: 70%;
	}

	.wp-block-themeisle-blocks-progress-bar__outer__value {
		color: var( --percentage-color-outer );
		margin-left: auto;
		display: grid;
		align-items: center;
		position: inherit;
		font-size: max( var( --title-font-size ), 12px );
		line-height: 70%;
	}
}

html[amp] {
	.wp-block-themeisle-blocks-progress-bar {
		.wp-block-themeisle-blocks-progress-bar__area__bar {
			width: var( --percentage );
			opacity: 1;
		}

		.wp-block-themeisle-blocks-progress-bar__area__tooltip {
			opacity: 1;
		}
	}
}

@media ( max-width: 600px ) {
	.wp-block-themeisle-blocks-progress-bar {
		:is(
			.wp-block-themeisle-blocks-progress-bar__area,
			.wp-block-themeisle-blocks-progress-bar__area__title,
			.wp-block-themeisle-blocks-progress-bar__area__title span,
			.wp-block-themeisle-blocks-progress-bar__progress,
			.wp-block-themeisle-blocks-progress-bar__area__bar,
			.wp-block-themeisle-blocks-progress-bar__progress__append 
		) {
				height: min( var(--height), 64px);
				font-size: min( var(--font-size), 64px);
		}
	
		:is(.wp-block-themeisle-blocks-progress-bar__outer__title, .wp-block-themeisle-blocks-progress-bar__outer__value) {
			font-size: min( var(--title-font-size), 64px);
		}
	} 
}
