@import "@wordpress/base-styles/mixins";
@import "../../../modernized-mixins";

$break-large-stats-countries: 1280px;
$locations-horizontal-bar-width: 380px;

.stats-card.list-locations,
.stats-card-skeleton.locations-skeleton {
	@include segmented-controls;

	.stats-card-header--main {
		align-items: flex-start;
		flex-direction: column;
	}

	.stats-card-header {
		.segmented-control.stats-module-locations__tabs {
			margin-top: 0;
			width: 100%;
		}

		.segmented-control.stats-module-locations__tabs .segmented-control__item {
			flex: 1 1 0;
		}

		&.stats-card-header--split .stats-card-header--main__left {
			.stats-download-csv {
				display: none;
			}
		}
	}

	.stats-module-locations__actions {
		display: block;
		margin: 12px 24px 0;

		.stats-download-csv {
			color: var(--color-link);
			gap: 4px;
			margin-left: auto;
			display: none;
		}
	}

	.stats-module-locations__country-filter {
		width: fit-content;
		display: flex;
	}

	.stats-module-locations__country-filter--tooltip {
		margin-left: 12px;
		margin-top: 8px;
	}

	.stats-card__content {
		height: auto;
	}

	.stats-card__content .stats-card--hero {
		padding: 0;
	}

	.stats-card--column-header {
		display: flex;
		justify-content: space-between;
		padding: 12px 24px;

		@media (max-width: $break-small) {
			padding: 12px 16px;
		}
	}

	.stats-card--column-header__left {
		display: flex;
		justify-content: space-between;
		width: calc(100% - 75px);
	}
	.stats-card--column-header__right {
		width: 75px;
		text-align: right;
	}

	.stats-geochart .google-visualization-tooltip-item-list .google-visualization-tooltip-item:first-child {
		margin-bottom: 0;
	}

	.stats-geochart .google-visualization-tooltip-item-list .google-visualization-tooltip-item {
		margin-top: 0;
		margin-bottom: 0;
	}
}

.stats-summary-view {
	.stats-card.list-locations,
	.stats-card-skeleton.locations-skeleton {
		.stats-card--hero .stats-card-header {
			&:not(.stats__summary--narrow-mobile) {
				padding: 0 24px 12px 0;
			}
		}

		.stats-card-header.stats-card-header--split .stats-card-header--main__left {
			display: flex;
			justify-content: space-between;
			width: 100%;

			.stats-download-csv {
				display: inherit;
			}
		}

		.stats__summary--narrow-mobile {
			.stats-card--column-header {
				padding: 0;
			}
		}
	}

	.stats-card-skeleton.locations-skeleton {
		&.stats-card-skeleton--with-hero .stats-card__content {
			flex-direction: column;
		}
	}
}

.stats__module-list--traffic .stats-card.list-locations,
.stats__module-list--traffic .stats-card-skeleton.locations-skeleton {
	.stats-card-header {
		padding: 0 24px;
	}

	.stats-card--hero {
		width: 100%;
	}

	.stats-card--hero .stats-geochart {
		height: auto;
		margin-bottom: 0;
	}

	.stats-card--hero .stats-geochart.stats-module__placeholder {
		margin: 0;
		min-width: 100%;
		padding: 0;
		width: 100%;
	}

	// Ensure the tabs are above the overlay
	.stats-module-locations__tabs {
		position: relative;
		z-index: 2;
	}
}

.stats__module-list--traffic .stats-card-skeleton.locations-skeleton .stats-card--hero {
	width: auto;
}

.stats-card-skeleton.locations-skeleton .stats-card--hero,
.stats-card.list-locations .stats-card--hero {
	.stats-card-skeleton__placeholder,
	.stats-geochart.stats-module__placeholder {
		height: 480px;
	}
}

@include break-large {
	.stats-card.list-locations, .stats-card-skeleton.locations-skeleton {
		.stats-card-header--main {
			align-items: center;
			flex-direction: row;
		}

		.stats-module-locations__actions {
			align-items: center;
			display: flex;
			justify-content: space-between;

			.stats-download-csv {
				display: inherit;
			}
		}
	}

	.stats-card.list-locations .stats-card-header,
	.stats-card-skeleton.locations-skeleton .stats-card-header {
		.segmented-control.stats-module-locations__tabs {
			width: calc( $locations-horizontal-bar-width - 24px - 24px);
			flex: none;
		}
	}

	.stats-summary-view {
		.stats-card.list-locations,
		.stats-card-skeleton.locations-skeleton {
			.stats-card-header.stats-card-header--split .stats-card-header--main__left {
				width: auto;

				.stats-download-csv {
					display: none;
				}
			}
		}
	}
}

@include break-wide {
	.stats__module-list--traffic .stats-card.list-locations .stats-card__content,
	.stats__module-list--traffic .stats-card-skeleton.locations-skeleton .stats-card__content {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		.stats-card--hero {
			max-width: calc(100% - $locations-horizontal-bar-width);
			overflow: hidden;
		}
	}

	.stats-card.list-locations,
	.stats-card-skeleton.locations-skeleton {
		.stats-card__content .stats-card--hero {
			flex: 2;
			margin: 0 24px;

			// Corresponding to .stats-card--hero above.
			.stats-card-header {
				padding: 0 0 12px;
			}

			.stats-geochart {
				margin: 0 auto;
				overflow: hidden;
				width: 100%;
			}

			.stats-geochart div > div {
				display: block;
				margin: 0 auto;
			}
		}

		.stats-card--header-and-body {
			flex: 0 0 $locations-horizontal-bar-width;
		}

		.stats-card--footer {
			flex-basis: 100%;
		}

		.stats-module-locations__actions {
			margin: 12px 0 0;
		}
	}
}
