@import "chartist-settings";

@mixin ct-responsive-svg-container($width: 100%, $ratio: $ct-container-ratio) {
	display: block;
	position: relative;
	width: $width;

	&:before {
		display: block;
		float: left;
		content: "";
		width: 0;
		height: 0;
		padding-bottom: $ratio * 100%;
	}

	&:after {
		content: "";
		display: table;
		clear: both;
	}

	> svg {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
	}
}

@mixin ct-align-justify($ct-text-align: $ct-text-align, $ct-text-justify: $ct-text-justify) {
	align-items: $ct-text-align;
	justify-content: $ct-text-justify;

	// Fallback to text-align for non-flex browsers
	@if ($ct-text-justify == 'flex-start') {
		text-align: left;
	} @else if ($ct-text-justify == 'flex-end') {
		text-align: right;
	} @else {
		text-align: center;
	}
}

@mixin ct-chart-label($ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-text-line-height: $ct-text-line-height) {
	fill: $ct-text-color;
	color: $ct-text-color;
	font-size: $ct-text-size;
	line-height: $ct-text-line-height;
}

@mixin ct-chart-grid($ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray) {
	stroke: $ct-grid-color;
	stroke-width: $ct-grid-width;

	@if ($ct-grid-dasharray) {
		stroke-dasharray: $ct-grid-dasharray;
	}
}

@mixin ct-chart-point($ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape) {
	stroke-width: $ct-point-size;
	stroke-linecap: $ct-point-shape;
}

@mixin ct-chart-line($ct-line-width: $ct-line-width, $ct-line-dasharray: $ct-line-dasharray) {
	fill: none;
	stroke-width: $ct-line-width;

	@if ($ct-line-dasharray) {
		stroke-dasharray: $ct-line-dasharray;
	}
}

@mixin ct-chart-area($ct-area-opacity: $ct-area-opacity) {
	stroke: none;
	fill-opacity: $ct-area-opacity;
}

@mixin ct-chart-bar($ct-bar-width: $ct-bar-width) {
	fill: none;
	stroke-width: $ct-bar-width;
}

//@mixin ct-chart-donut($ct-donut-width: $ct-donut-width) {
//  fill: none;
//  stroke-width: $ct-donut-width;
//}

@mixin ct-chart-series-color($color) {
	.ct-point, .ct-line, .ct-bar /*, .ct-slice-donut*/
	{
		stroke: $color;
	}

	.ct-slice-pie, .ct-area {
		fill: $color;
	}
}

@mixin ct-chart(
	$ct-container-ratio: $ct-container-ratio,
	$ct-text-color: $ct-text-color,
	$ct-text-size: $ct-text-size,
	$ct-grid-color: $ct-grid-color,
	$ct-grid-width: $ct-grid-width,
	$ct-grid-dasharray: $ct-grid-dasharray,
	$ct-point-size: $ct-point-size,
	$ct-point-shape: $ct-point-shape,
	$ct-line-width: $ct-line-width,
	$ct-bar-width: $ct-bar-width,
	//$ct-donut-width: $ct-donut-width,
	$ct-series-names: $ct-series-names,
	$ct-series-colors: $ct-series-colors) {


	.ct-axis-title {
		fill: $ct-axis-label-color;
		@include noselect;
	}

	// --- Label ---
	.ct-label {
		@include ct-chart-label($ct-text-color, $ct-text-size);

		&.ct-horizontal.ct-start {
			@include ct-align-justify(flex-end, flex-start);
			text-anchor: start; // Fallback for browsers that don't support foreignObjects
		}

		&.ct-horizontal.ct-end {
			@include ct-align-justify(flex-start, flex-start);
			text-anchor: start;

			// EDIT: added for angled horiz labels
			transform: translate(-4px, 0%) rotate(45deg);
		}

		&.ct-vertical.ct-start {
			@include ct-align-justify(flex-end, flex-end);
			text-anchor: end;

			transform: translate(0, 20%);
		}

		&.ct-vertical.ct-end {
			@include ct-align-justify(flex-end, flex-start);
			text-anchor: start;
		}
	}

	.ct-chart-line .ct-label,
	.ct-chart-bar .ct-label {
		display: flex;
	}

	// --- Bar labels ---

	.ct-chart-bar {
		.ct-label.ct-horizontal.ct-start {
			@include ct-align-justify(flex-end, center);
			text-anchor: start;
		}

		.ct-label.ct-horizontal.ct-end {
			@include ct-align-justify(flex-start, center);
			text-anchor: start;
		}

		&.ct-horizontal-bars .ct-label {
			&.ct-horizontal.ct-start {
				@include ct-align-justify(flex-end, flex-start);
				text-anchor: start;
			}

			&.ct-horizontal.ct-end {
				@include ct-align-justify(flex-start, flex-start);
				text-anchor: start;
			}

			&.ct-vertical.ct-start {
				//@include ct-chart-label($ct-text-color, $ct-text-size, center, $ct-vertical-text-justify);
				@include ct-align-justify(center, flex-end);
				text-anchor: end;
			}

			&.ct-vertical.ct-end {
				@include ct-align-justify(center, flex-start);
				text-anchor: end;
			}
		}
	}

	.ct-grid {
		@include ct-chart-grid($ct-grid-color, $ct-grid-width, $ct-grid-dasharray);
	}

	.ct-point {
		@include ct-chart-point($ct-point-size, $ct-point-shape);
	}

	.ct-line {
		@include ct-chart-line($ct-line-width);
	}

	.ct-area {
		@include ct-chart-area();
	}

	.ct-bar {
		@include ct-chart-bar($ct-bar-width);
	}

	//.ct-slice-donut {
	//  @include ct-chart-donut($ct-donut-width);
	//}

	@if $ct-include-colored-series {
		@for $i from 0 to length($ct-series-names) {
			.ct-series-#{nth($ct-series-names, $i + 1)} {
				$color: nth($ct-series-colors, $i + 1);
				@include ct-chart-series-color($color);
			}
		}
	}
}

@if $ct-include-classes {
	@include ct-chart();

	@if $ct-include-alternative-responsive-containers {
		@for $i from 0 to length($ct-scales-names) {
			.#{nth($ct-scales-names, $i + 1)} {
				@include ct-responsive-svg-container($ratio: nth($ct-scales, $i + 1));
			}
		}
	}
}