@import "@automattic/components/src/styles/typography";

.chart-container {
	cursor: pointer;
	position: relative;
	max-width: 550px;

	.tick {
		line {
			visibility: hidden;
		}

		text {
			font-size: $font-body-extra-small;
			fill: var(--studio-gray-50);
		}
	}

	.tooltip {
		z-index: 1000;
		opacity: 0;
		position: absolute;
		background-color: var(--studio-gray-90);
		color: #fff;
		padding: 7px 10px;
		border-radius: 3px;
		font-size: $font-body-small;
	}

	.chart {
		position: relative;
		padding: 0;
		margin-left: -25px;

		.info {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(calc(-50% + 10px), -50%);
			padding: 12px 14px;
			border-radius: 4px;
			background: #f6f7f7;
			width: 70%;
			max-width: 330px;
			text-wrap: pretty;
			font-family: $font-sf-pro-text;
			line-height: $font-size-header-small;

			p {
				font-size: $font-body-extra-small;
				color: var(--studio-gray-50);
				margin: 0;
			}

			.heading {
				font-size: $font-body-small;
				color: var(--studio-gray-70);
				font-weight: 500;
				margin-bottom: 4px;
			}

		}
	}
}
