@use "sass:math";
@import "calypso/my-sites/stats/modernized-tooltip-styles";
@import "calypso/my-sites/stats/modernized-chart-tabs-styles";
@import "calypso/my-sites/stats/modernized-layout-styles";
@import "calypso/my-sites/stats/theme-override-mixin";
@import "calypso/my-sites/stats/modernized-mixins";

// Odyssey font overrides
$font-sf-pro-display: "SF Pro Display", $sans;

// Shared across sections/modules
.is-odyssey-stats .highlight-cards-heading,
.is-odyssey-stats .highlight-card-count-value,
.is-odyssey-stats .post-stats-card__post-title,
.is-odyssey-stats .post-stats-card__count-value {
	font-family: $font-sf-pro-display;
}

// All-time highlights section
.is-odyssey-stats .highlight-card-content .highlight-card-detail-item-content {
	font-family: $font-sf-pro-display;
}

// Posting Activity module
.is-odyssey-stats .post-trends__title {
	font-family: $font-sf-pro-display;
}

// App Promo card
.is-odyssey-stats .app-promo-card__title {
	font-family: $font-sf-pro-display;
}

.stats {
	--color-link: var(--theme-highlight-color);
	--color-link-dark: var(--color-accent-dark);
}

// Module container
@include breakpoint-deprecated( ">960px" ) {
	.stats__module-column {
		float: right;
		width: calc(50% - 4px);

		&:first-child {
			float: left;
		}

		&:last-child {
			clear: right;
		}
	}
}

@include breakpoint-deprecated( ">1280px" ) {
	.stats__module-column {
		width: calc(33% - 3px);

		&:last-child {
			clear: none;
			left: -10px;
			position: relative;
		}
	}
}

.old-stats-link .button .gridicon {
	margin-bottom: -2px;
	margin-left: 4px;
}

.stats-navigation__control {
	margin-right: 16px;

	@include breakpoint-deprecated( "<480px" ) {
		margin-right: 0;
	}
}

.stats__sticky-navigation.is-sticky .sticky-panel__content, .sticky-panel.is-sticky .sticky-panel__content {
	background: var(--studio-white);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 0 56px rgba(0, 0, 0, 0.075);

	.stats-period-navigation {
		margin: 9px 0;
	}
}

// Stats section scoped styles
.is-section-stats {
	&.color-scheme.is-classic-dark {
		@include apply-improved-classic-dark-colors();
	}

	.sticky-panel.is-sticky {
		padding: 0;
	}

	// TODO: Remove other independent segmented control styles by this mixin.
	@include segmented-controls;
}

.list-emails {
	.horizontal-bar-list .horizontal-bar-list-item-bar::before {
		display: none;
	}

	.horizontal-bar-list-item--additional,
	.stats-card-header__additional {
		font-weight: 500;
	}
}

@import "calypso/my-sites/stats/grid-layout";
