/** @format */
.woocommerce-chart {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	margin: -$gap;
	border-top: 1px solid $core-grey-light-200;

	.woocommerce-chart__header {
		min-height: 50px;
		border-top: 1px solid $core-grey-light-200;
		display: flex;
		flex-wrap: nowrap;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;

		.woocommerce-chart__title {
			height: 18px;
			color: $black;
			font-size: 15px;
			font-weight: 600;
			line-height: 18px;
			margin-left: $gap;
		}
	}

	.woocommerce-chart__body {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		width: 100%;

		&.woocommerce-chart__body-column {
			flex-direction: column;
		}
	}

	.woocommerce-chart__footer {
		width: 100%;

		.woocommerce-legend {
			&.woocommerce-legend__direction-column {
				height: 100%;
				min-height: none;
			}
		}
	}

	.key-colour {
		width: 10px;
		height: 10px;
		margin-right: 8px;
		border-radius: 2px;
	}
	.key-key {
		margin-right: 6px;
		font-weight: 600;
	}
	svg {
		overflow: visible;
	}
	.tooltip {
		position: absolute;
		display: none;
		min-width: 80px;
		height: auto;
		background-color: $white;
		text-align: left;
		padding: 6px;
		box-shadow: 0 4px 8px 0 $gray-darken-30, 0 6px 20px 0 $gray-darken-30;

		h4 {
			text-align: center;
			width: 100%;
			margin: 0 auto;
		}

		ul {
			padding-left: 7px;
			list-style: none;
			margin-bottom: 2px;
			margin-top: 2px;
			font-size: 14px;

			li {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: flex-start;
				align-items: center;
			}
		}
	}
	.bargroup {
		&rect {
			shape-rendering: crispEdges;
		}
	}
	.grid {
		line {
			stroke: $core-grey-light-200;
			stroke-width: 1;
			shape-rendering: crispEdges;
		}
	}
	.tick {
		padding-top: 10px;
		stroke-width: 1;
	}
	.y-axis {
		&.tick {
			&text {
				fill: $core-grey-dark-500;
			}
		}
	}
	line {
		&.focus-grid {
			stroke: $core-grey-light-200;
			stroke-width: 1px;
		}
	}

	&.is-placeholder {
		@include placeholder();
		display: inline-block;
		height: 200px;
		width: 100%;
		margin: 0;
		padding: 0;
		margin-bottom: $gap;
		border: 1px solid $core-grey-light-700;
	}
}

.woocommerce-chart__container {
	position: relative;
	width: 100%;

	.tooltip {
		position: absolute;
	}
}

.woocommerce-legend {
	color: $black;
	display: flex;
	height: 100%;
	margin: 0;

	&.woocommerce-legend__direction-column {
		flex-direction: column;
		border-right: 1px solid $core-grey-light-200;
		border-top: 1px solid $core-grey-light-200;
		height: 300px;
		min-width: 320px;

		li {
			height: 32px;
			margin: 0 17px;

			&:first-child {
				margin-top: 17px;
			}
		}
	}

	&.woocommerce-legend__direction-row {
		flex-direction: row;

		li {
			margin: 0 0 0 30px;

			button {
				.woocommerce-legend__item-container {
					height: 50px;
					align-items: center;

					.woocommerce-legend__item-checkmark {
						top: 17px;
					}

					.woocommerce-legend__item-title {
						margin-right: 17px;
					}
				}
			}
		}
	}

	li {
		button {
			background-color: $white;
			display: inline-flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: space-between;
			width: 100%;
			border: none;
			padding: 0;

			&:focus {
				outline: none;
			}

			.woocommerce-legend__item-container {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: space-between;
				position: relative;
				padding: 3px 0 3px 24px;
				cursor: pointer;
				font-size: 13px;
				user-select: none;
				width: 100%;

				&:hover {
					input {
						~ .woocommerce-legend__item-checkmark {
							background-color: $core-grey-light-200;
						}
					}
				}

				.woocommerce-legend__item-checkmark {
					position: absolute;
					top: 2px;
					left: 0;
					height: 16px;
					width: 16px;
					background-color: $white;

					&:after {
						content: '';
						position: absolute;
						display: none;
					}

					&.woocommerce-legend__item-checkmark-checked {
						&:after {
							display: block;
							left: 6px;
							top: 4px;
							width: 3px;
							height: 6px;
							border: solid $white;
							border-width: 0 2px 2px 0;
							transform: rotate(45deg);
						}
					}
				}

				.woocommerce-legend__item-total {
					font-weight: bold;
				}
			}
		}
	}
}