@import "@wordpress/base-styles/breakpoints";
@import "@automattic/typography/styles/variables";

.stats-period-navigation {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	gap: 8px 20px;
	align-items: center;
	margin: 1.5em 0;
	padding: 0 20px;

	&.stats-period-navigation__is-with-new-date-control {
		padding: 0;
		align-items: flex-start;
	
		.stats-period-navigation__date-range-control {
			margin-left: auto;

			display:flex;
			gap: 20px;

			@media (max-width: $break-mobile) {
				flex-grow: 1;
			}
		}
	}

	.stats-period-navigation__children {
		flex-grow: 1;
	}

	.stats-section-title {
		margin: 0;
		font-size: $font-title-large;
		line-height: 40px;
		color: var(--studio-gray-100);
		text-align: left;

		@media (max-width: $break-mobile) {
			font-size: $font-title-medium;
		}
	}

	.stats-date-picker__refresh-status {
		font-size: $font-body-small;
		line-height: 16px;
	}

	.stats-period-navigation__date-control {
		display: flex;
		flex-flow: column nowrap;
		margin-left: auto;

		.stats-period-navigation__period-control {
			display: flex;
			justify-content: flex-end;

			padding-top: 16px;

			.stats-navigation-arrows {
				margin-left: 24px;
				margin-right: 24px;
			}
		}
	}

	.chart__legend {
		margin-bottom: initial;
	}
}
