/**
 * CD Calculator — layout overrides for donut chart and clear button.
 */

.sn-ci-calc--cd .sn-ci-calc__calc-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.sn-ci-calc--cd .sn-ci-calc__calc-actions .sn-ci-calc__btn-action {
	margin: 0;
}

.sn-cd-calc__pie-col {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 14rem;
}

.sn-cd-calc__pie-wrap {
	width: 100%;
	max-width: 22rem;
	margin: 0 auto;
}

.sn-cd-calc__pie-wrap[hidden] {
	display: none;
}

.sn-cd-calc__pie-wrap .sn-calc-chart__svg--pie-below {
	width: 100%;
	max-width: 100%;
	height: auto;
}

.sn-cd-calc__pie-wrap .sn-calc-chart__svg--pie-large {
	width: 100%;
	max-width: 22rem;
	min-width: 16rem;
	height: auto;
}

.sn-ci-calc--cd .sn-ci-calc__metrics {
	align-items: stretch;
}

.sn-ci-calc--cd .sn-cd-calc__pie-col {
	flex: 1 1 auto;
}

.sn-cd-calc__pie-wrap .sn-calc-chart__slice,
.sn-cd-calc__pie-wrap .sn-calc-chart__pie-label {
	transition: opacity 0.18s ease;
}

.sn-cd-calc__pie-wrap .sn-calc-chart__slice:hover,
.sn-cd-calc__pie-wrap .sn-calc-chart__pie-label:hover {
	opacity: 0.88;
}

.sn-ci-calc--cd .sn-ci-calc__label--multiline .sn-ci-calc__tooltip {
	margin-left: 0.25rem;
	vertical-align: middle;
}

@media (min-width: 1024px) {
	.sn-cd-calc__pie-col {
		min-height: 16rem;
	}

	.sn-cd-calc__pie-wrap {
		max-width: 24rem;
	}

	.sn-cd-calc__pie-wrap .sn-calc-chart__svg--pie-large {
		max-width: 24rem;
		min-width: 18rem;
	}
}