@import '../c/conf';

$mcp_w: 1080rpx;
$mcp_border_w: 20rpx;

.m-circle-progress {
	box-sizing: border-box;
	position: relative;
	width: $mcp_w;
	height: $mcp_w;
    border-radius: 100%;
    transform: translate(-50%, -50%) scale(0.5);

	.mcp-left,
	.mcp-right {
		position: absolute;
		display: block;
		width: 50%;
		height: $mcp_w;
		overflow: hidden;

		view {
            box-sizing: border-box;
			display: block;
			position: absolute;
			top: 0;
			width: $mcp_w;
			height: $mcp_w;
			border: $mcp_border_w solid transparent;
			border-radius: 100%;
            // transition: transform 1.03s linear;
		}
	}

	.mcp-left {
		left: 0;

		view {
			left: 0;
			border-top-color: #ff8c65;
			border-left-color: #ff8c65;
			transform: rotate(135deg);
		}
	}

	.mcp-right {
		right: 0;

		view {
			right: 0;
			border-top-color: #ff8c65;
			border-right-color: #ff8c65;
			transform: rotate(-135deg);
		}
	}
}