/** @format */
.woocommerce-chart {
	margin-top: -$gap;
	margin-bottom: $gap-large;
	background: $white;
	border: 1px solid $core-grey-light-700;
	border-top: 0;

	@include breakpoint( '<782px' ) {
		margin-left: -16px;
		margin-right: -16px;
		margin-bottom: $gap-small;
		border-left: none;
		border-right: none;
		width: auto;
	}

	.woocommerce-chart__header {
		min-height: 50px;
		border-bottom: 1px solid $core-grey-light-700;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		align-items: center;
		width: 100%;

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

		.woocommerce-chart__type-button {
			&.components-icon-button {
				color: $core-grey-light-700;
				&.woocommerce-chart__type-button-selected {
					color: $core-grey-dark-500;
				}
				&:hover {
					box-shadow: none;
				}
			}
		}
	}

	.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;
				border-right: none;
				margin-bottom: $gap;
			}
		}
	}

	svg {
		overflow: visible;
	}
	.tooltip {
		border: 1px solid $core-grey-light-700;
		position: absolute;
		display: flex;
		min-width: 324px;
		height: auto;
		background-color: $white;
		text-align: left;
		padding: 17px;
		box-shadow: 0 3px 20px 0 rgba(18, 24, 30, 0.1), 0 1px 3px 0 rgba(18, 24, 30, 0.1);
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		pointer-events: none;
		visibility: hidden;
		z-index: 1;

		@include breakpoint( '<600px' ) {
			min-width: auto;
			width: calc(100% - #{$gap-large * 2});
		}

		h4 {
			text-align: left;
			line-height: 18px;
			width: 100%;
			text-transform: uppercase;
			font-size: 11px;
			color: $core-grey-dark-300;
			margin-top: 0;
		}

		ul {
			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;

				&.key-row {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					width: 100%;

					.key-container {
						width: 100%;
						min-width: 100px;

						.key-color {
							display: inline-block;
							width: 16px;
							height: 16px;
							margin-right: 8px;
						}
						.key-key {
							margin-right: 6px;
						}
					}
					.key-value {
						font-weight: 600;
					}
				}
			}
		}
	}
	.bargroup {
		&rect {
			shape-rendering: crispEdges;
		}
	}
	.grid {
		.tick {
			line {
				stroke: $core-grey-light-500;
				stroke-width: 1;
				shape-rendering: crispEdges;
			}

			&:first-child {
				line {
					stroke: $core-grey-dark-500;
				}
			}

			&:last-child {
				line {
					opacity: 0;
				}
			}
		}
	}
	.tick {
		padding-top: 10px;
		stroke-width: 1;
	}
	.y-axis {
		text-anchor: start;
		&.tick {
			&text {
				fill: $core-grey-dark-500;
			}
		}
	}

	.focus-grid {
		line {
			stroke: $core-grey-light-700;
			stroke-width: 1px;
		}
	}

	&.is-placeholder {
		@include placeholder();
		height: 200px;
		width: 100%;
		padding: 0;
	}
}

.woocommerce-chart__interval-select {
	align-items: start;
	border-right: 1px solid $core-grey-light-700;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 0 0 auto;
	min-height: 50px;
	padding: 8px $gap 0 $gap;

	@include breakpoint( '<782px' ) {
		padding: 0 $gap;
		margin-top: -8px;
	}

	.rtl & {
		margin: 0 auto 0 0;
		border-right: 0;
		border-left: 1px solid $core-grey-light-700;

		@include breakpoint( '<782px' ) {
			border-left: 0;
		}
	}

	@include breakpoint( '<782px' ) {
		border-right: 0;
		min-height: 0;
		order: 1;
		width: 100%;
	}

	#wpbody & .components-select-control__input {
		@include font-size( 13 );
		border: 0;
		box-shadow: none;
	}
}

.woocommerce-chart__types {
	padding: 0 8px;
}

.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-700;
		height: 300px;
		min-width: 320px;

		li {
			margin: 0;
			padding: 0;

			button {
				height: 32px;
				padding: 0 17px;
			}

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

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

		li {
			padding: 0;
			margin: 0;

			button {
				padding: 0 17px;

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

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

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

	li {
		&.woocommerce-legend__item {
			button {
				&:hover {
					background-color: $core-grey-light-100;
				}
			}
		}

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

			.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 {
					border: 1px solid $core-grey-light-900;
					position: absolute;
					top: 2px;
					left: 0;
					height: 16px;
					width: 16px;
					background-color: $white;

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

					&.woocommerce-legend__item-checkmark-checked {
						background-color: currentColor;
						border-color: currentColor;

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

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

			&:focus {
				outline: none;

				.woocommerce-legend__item-container {
					.woocommerce-legend__item-checkmark {
						outline: 2px solid $core-grey-light-900;
					}
				}
			}
		}
	}
}