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

.stats-summary-view {
	@include segmented-controls;

	.highlight-cards-heading {
		@media (min-width: 661px) and (max-width: 1380px) {
			margin-left: 32px;
			margin-right: 32px;
		}
	}

	&.navigation-header {
		@media (min-width: 661px) and (max-width: 1380px) {
			padding: 0 32px 24px 32px;
		}
	}

	tbody tr:nth-child(odd),
	.is-fixed-row-header tbody > tr:nth-child(odd) > th {
		background-color: var(--studio-gray-0);
	}

	&.stats {
		@media (min-width: $break-medium) {
			padding-bottom: 24px;
		}
	}
}

.stats-summary__positioned {
	@media (min-width: $break-small) {
		margin-top: 32px;
	}

	@media (min-width: ($break-medium + 1px)) and (max-width: 1380px) {
		padding: 0 32px;
	}

	@media (max-width: $break-medium) {
		.stats-card {
			border-top: 0;
		}
	}

	@media (max-width: $break-small) {
		.stats-summary-nav__select {
			background-color: var(--studio-white);
			border-top: 0;

			svg {
				position: absolute;
				right: 16px;
			}
		}
	}

	.stats__summary--narrow-mobile {
		@media (max-width: $break-medium) {
			padding-inline: 0;
		}

		@media (max-width: ($break-small + 1px)) {
			padding-left: 16px;
			padding-right: 16px;
		}
	}
}

.stats-navigation.stats-navigation--improved {
	.stats-navigation__tabs {
		margin-left: -16px;

		.components-tab-panel__tabs {
			padding-left: 0;
		}

		@media (max-width: $break-small) {
			.components-tab-panel__tabs {
				padding-left: 16px;
				padding-right: 16px;
			}
		}
	}
}
