@use "sass:math";
@import "@wordpress/base-styles/breakpoints";
@import "calypso/my-sites/stats/components/highlight-cards/variables";
@import "@automattic/components/src/styles/typography";

$custom-stats-tab-mobile-break: $break-medium;

.stats > .stats-content {
	padding-top: $vertical-margin;
	@media (max-width: $custom-mobile-breakpoint) {
		padding-top: 0;
	}
}

// For modernized main charts with tabs inside the Traffic, Store, and Ads pages
.is-chart-tabs {
	margin-bottom: $vertical-margin;

	&.is-loading {
		// Extract .stats-module.is-loading from StatsModulePlaceholder
		.chart {
			display: none;
		}
	}

	// Chart Tabs
	.stats-tabs {
		width: 100%;
		padding: 24px 0 16px;
		border: 0;
		// Use border radius of its parent; otherwise it'd break the parent corner.
		border-radius: 4px;
		box-sizing: border-box;

		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-flow: row wrap;
		gap: 24px;

		@media (max-width: $custom-mobile-breakpoint) {
			padding: 24px math.div($vertical-margin, 2) 16px;
		}

		@media (max-width: $custom-stats-tab-mobile-break) {
			display: block;
			padding: 24px 0 16px;
		}

		@media (min-width: $custom-stats-tab-mobile-break) {
			padding: 24px;
		}

		&.is-enabled {
			background-color: inherit;
		}

		// Adjust new stats-tabs styling beyond the mobile layout
		.stats-tab {
			font-family: $font-sf-pro-text;
			border: 0;

			// Keep the original mobile stats-tabs styles
			@media (max-width: $custom-stats-tab-mobile-break) {
				width: 100%;
				flex: 1 1 100%;
				max-width: initial;
				float: none;
				border-bottom: 1px solid var(--color-neutral-5);

				&:first-child {
					border-top: 1px solid var(--color-neutral-5);
				}

				&:not(:first-child) {
					margin: 0;
				}
			}

			// Keep the original mobile stats-tabs styles
			@media (min-width: $custom-stats-tab-mobile-break) {
				flex: 1 1 45%;
				width: 45%;
			}

			@media (min-width: $break-xlarge) {
				flex: 1 1 155px;
				// For wrap layout of three items in a row.
				max-width: 31%;
			}

			.gridicon {
				@media (max-width: $custom-stats-tab-mobile-break) {
					float: left;
					margin: 0;
				}
			}

			a {
				display: block;
				background-color: var(--color-neutral-0);
				border: 1.5px solid transparent;
				border-radius: 4px;
				overflow: hidden;
				color: var(--studio-black);
				padding: 10px 24px;

				@media (max-width: $custom-stats-tab-mobile-break) {
					display: grid;
					grid-template-columns: 2fr 2fr 3fr;
					align-items: center;
					justify-content: space-between;
					border-radius: 0;
				}

				&:hover {
					color: var(--studio-black);
					background-color: var(--color-neutral-0);
					border: 1.5px solid var(--color-neutral-10);

					.label,
					.value {
						color: var(--studio-black);
					}
				}

				.label {
					color: var(--color-neutral-60);
					font-size: $font-body-small;
					line-height: 20px;
					text-transform: none;
					letter-spacing: -0.15px;
				}

				.value {
					color: var(--studio-black);
					font-size: $font-title-small;
					font-weight: 500;
					line-height: 30px;
					margin-left: 0;

					@media (max-width: $custom-stats-tab-mobile-break) {
						margin-left: auto;
						padding: 0 20px 0 10px;
						font-size: $font-body-small;
					}

					// For stats-tabs in Store page
					&:not(.store-stats-orders-chart__value):not(:last-child) {
						display: none;
					}
				}

				.delta {
					justify-content: center;

					// For mobile stats-tabs in Store page
					@media (max-width: $custom-stats-tab-mobile-break) {
						display: none;
					}
				}
			}

			&.tab-disabled a {
				cursor: default;
				border: none;
			}

			&.is-low {
				a {
					.value {
						color: var(--color-neutral-60);
					}
				}
			}

			&.is-selected,
			&.is-selected.is-low {
				a {
					color: var(--studio-black);
					border-color: var(--color-primary);
					background-color: var(--color-surface);

					// Keep the original mobile stats-tabs border styles
					@media (max-width: $custom-stats-tab-mobile-break) {
						border-color: transparent;
					}

					.label {
						color: var(--studio-black);
					}

					.value {
						color: var(--studio-black);
					}
				}
			}

			&.is-low,
			&.is-selected,
			&.is-selected.is-low {
				a {
					&:hover {
						color: var(--studio-black);

						.label {
							color: var(--studio-black);
						}

						.value {
							color: var(--studio-black);
						}
					}
				}
			}

			// Apply highlight card styles to stats-tabs.
			&.is-highlighted {
				text-align: left;

				.stats-tabs__highlight {
					display: flex;
					align-items: center;
					justify-content: end;
				}
				// TODO: The relevant class names could be refactored to be more comprehensive.
				.highlight-card-difference {
					font-size: $font-body-small;
					font-weight: 600;
					line-height: 25px;
					letter-spacing: -0.24px;
					margin-left: 8px;
				}
				.stats-tabs__value.value {
					display: none;
				}
				@media (min-width: $custom-stats-tab-mobile-break) {
					& > a {
						padding: 8px 16px;
					}
					.stats-tabs__highlight-value {
						font-weight: 500;
						font-size: $font-title-medium;
						line-height: 40px;
						// Prevent different heights of Flexbox items.
						white-space: nowrap;
					}
					.stats-tabs__highlight-loading {
						padding: 5px;
						width: 100%;
					}
					.stats-tabs__highlight {
						display: flex;
						justify-content: start;
					}
				}
			}
		}
	}
}
