@use '@talend/bootstrap-theme/src/theme/guidelines' as *;
@use '@talend/design-tokens/lib/tokens' as tokens;
@import '~@talend/bootstrap-theme/src/theme/animation';

$tc-pie-chart-font-size: $font-size-large !default;
$tc-pie-chart-loading-min-height-no-label: 20px !default;
$tc-pie-chart-loading-min-height: 25px !default;
$tc-pie-chart-skeleton-label-width: 40px !default;
$tc-pie-chart-skeleton-label-height: 14px !default;
$tc-pie-chart-loading-margin-left: 4px !default;
$tc-pie-chart-hover-color: tokens.$coral-color-accent-text !default;

$tc-pie-chart-colors: (rio-grande tokens.$coral-color-charts-success, jaffa tokens.$coral-color-charts-warning, chestnut-rose tokens.$coral-color-charts-danger, lightning-yellow tokens.$coral-color-charts-color-00, dove-gray tokens.$coral-color-charts-neutral-strong, silver-chalice tokens.$coral-color-charts-neutral, alto tokens.$coral-color-charts-neutral-weak) !default;

@mixin apply-color($color) {
	color: $color;
	stroke: $color;
	fill: $color;
}

.tc-pie-chart-loading {
	display: inline-flex;
	align-items: center;
	min-height: $tc-pie-chart-loading-min-height;

	&.tc-pie-chart-loading-no-label {
		min-height: $tc-pie-chart-loading-min-height-no-label;
	}

	&-circle {
		// adjust to be like loaded component
		margin-left: $tc-pie-chart-loading-margin-left;
		margin-right: $padding-smaller;
	}
}

// PieChart styles
.tc-pie-chart-button {
	&:hover {
		@each $type in $tc-pie-chart-colors {
			.tc-pie-chart-color-#{nth($type, 1)} {
				@include apply-color($tc-pie-chart-hover-color);
			}
		}
	}

	&:hover,
	&:active,
	&:focus {
		color: tokens.$coral-color-accent-text;
		text-decoration: none;
	}

	&.active {
		background-color: tokens.$coral-color-accent-background-strong-active;
		border-color: tokens.$coral-color-accent-background-strong-active;
		color: tokens.$coral-color-accent-text-weak;

		&:hover,
		&:active,
		&:focus {
			background-color: tokens.$coral-color-accent-background;
			border-color: tokens.$coral-color-accent-background;
			color: tokens.$coral-color-accent-text;
		}
	}
}

.tc-pie-chart-icon {
	font-size: $tc-pie-chart-font-size;
	display: inline-flex;
	align-items: center;

	background-color: transparent;
	border: none;
	color: tokens.$coral-color-neutral-text-weak;

	box-shadow: none;
	line-height: unset;
	padding: 0;

	@each $type in $tc-pie-chart-colors {
		.tc-pie-chart-color-#{nth($type, 1)} {
			@include apply-color(#{nth($type, 2)});
		}
	}

	& &-graph {
		margin-right: $padding-smaller;
		height: inherit;
		width: inherit;
	}
}