.cc360-gauge {
	--value: 0;
	--track: #d9d9de;
	--tick: #fff;
	--needle: #4b4a63;
	--ok: var(--e-global-color-accent);
	--warn: #eab308;
	--danger: #ef4444;
	--text: var(--e-global-color-text);
	--accent: var(--ok);

	position: relative;
	width: min(100%, 240px);
	margin-inline: auto;
	margin-top: -24px;
	padding-bottom: 10px;
	text-align: center;
}

.cc360-gauge[data-state="ok"] {
	--accent: var(--ok);
}

.cc360-gauge[data-state="warn"] {
	--accent: var(--warn);
}

.cc360-gauge[data-state="danger"] {
	--accent: var(--danger);
}

.cc360-gauge__svg {
	display: block;
	width: 100%;
	margin: 0 auto 8px;
	overflow: visible;
}

.cc360-gauge__track,
.cc360-gauge__fill {
	fill: none;
	stroke-width: 8;
}

.cc360-gauge__track {
	stroke: var(--track);
}

.cc360-gauge__fill {
	stroke: var(--accent);
	stroke-dasharray: var(--value) 100;
	stroke-linecap: butt;
}

.cc360-gauge__tick {
	stroke: var(--tick);
	stroke-width: 1.5;
	opacity: 0.95;
}

.cc360-gauge__needle-shape,
.cc360-gauge__hub {
	fill: var(--needle);
}

.cc360-gauge__meta {
	position: absolute;
	left: 50%;
	bottom: 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	pointer-events: none;
	transform: translate(-50%, -50%);
}

.cc360-gauge__value {
	color: var(--text);
	font-size: 24px;
	font-weight: 700;
	font-feature-settings: "tnum" 1, "lnum" 1;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.cc360-gauge__label {
	margin-top: 10px;
	color: var(--text);
	font-size: 18px;
	opacity: 0.8;
}

@media (min-width: 767px) and (max-width: 1024px) {
	.cc360-gauge__meta {
		bottom: 20px;
	}

	.cc360-gauge__value {
		font-size: 18px;
	}
}