.wp-block-themeisle-blocks-circle-counter {
	--font-size-title: 15px;
	--height: 100px;

	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin-bottom: 15px;

	:nth-child( 2 ) {
		margin-top: 20px;
	}

	.wp-block-themeisle-blocks-circle-counter-title__area {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wp-block-themeisle-blocks-circle-counter-title__value {
		font-weight: bold;
		text-align: center;
		font-size: var( --font-size-title );
	}
	
	.wp-block-themeisle-blocks-circle-counter__bar {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.wp-block-themeisle-blocks-circle-counter-container {
		margin: 20px auto;
		max-width: 100%;
	}

	.wp-block-themeisle-blocks-circle-counter-bg {
		fill: none;
		stroke: #4682b426;
	}

	.wp-block-themeisle-blocks-circle-counter-progress {
		fill: none;
		stroke: #3878ff;
		transform-origin: center;
		transform: rotateZ(-90deg);
		stroke-linecap: round;
	}

	.wp-block-themeisle-blocks-circle-counter-text {
		text-anchor: middle;
		dominant-baseline: middle;
		color: #000000;
		font-size: 15px;
	}
}

html {
	&[amp] {
		.wp-block-themeisle-blocks-circle-counter {
			--background-color: #e3ecf4;
			--progress-color: #3878ff;
			--border-radius: 100px 0px 0px 100px;
			--percentage-start: rotate( 180deg );
			--percentage-end: rotate( 300deg );

			.wp-block-themeisle-blocks-circle-counter-container {
				width: var( --height );
				height: var( --height );
				color: #fff;
				border-radius: 50%;
				overflow: hidden;
				position: relative;
				text-align: center;
				line-height: var( --height );
				margin: 20px
			}

			.wp-block-themeisle-blocks-circle-counter-overlay {
				z-index: 1;
				transform: rotate( 0);
				width: 100%;
				height: 100%;
				border: 10px solid var( --background-color );
				border-radius: 100%;
				margin: 0;
				position: relative;
				transform-origin: unset;
				top: -100%;
				left: 0;
			}

			.wp-block-themeisle-blocks-circle-counter-status {
				width: 50%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				border: 11px solid var( --progress-color );
				border-radius: var( --border-radius );
				border-right: 0;
				transform-origin: right;
				z-index: 100;
				transform: var( --percentage-start );

				&:last-of-type {
					transform: var( --percentage-end );
				}
			}

			:nth-child( 2 ) {
				margin: 0px;
			}
		}
	}
}
