@import "@automattic/typography/styles/variables";
@import "@wordpress/base-styles/breakpoints";
@import "@automattic/components/src/styles/typography";
@import "../modernized-mixins";

.stats__period-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin-top: 32px;
	padding: 0;

	.stats-content & {
		margin: 16px 0;
	}

	.is-sticky & {
		margin-top: 0;
		padding: 0 32px;
	}

	.period,
	.prefix {
		font-family: $brand-serif;
	}

	.stats-period-navigation {
		@include section-header-with-siblings;

		&.stats-period-navigation__is-with-new-date-control {
			padding: 0;
			align-items: center;

			@media (max-width: $break-large) {
				margin: 0;
			}

			@media (max-width: 660px) {
				margin-bottom: 24px;
			}

			@media (max-width: $break-mobile) {
				margin: 24px 0;
			}
		}
	}

	@include navigation-segment-control-buttons;

	// Make the content break line earlier than 660px
	@media (max-width: $break-large) {
		.stats-period-navigation {
			margin: 0 0 24px 0;
			padding: 0;
		}
	}

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

	@media (max-width: $break-mobile) {
		margin-top: 0;
	}
}
