@import "@wordpress/base-styles/breakpoints";

.stats-navigation {
	box-shadow: inset 0 -1px 0 #0000000d;

	// When the feature flag is enabled, adjust TabPanel padding
	.stats-navigation__tabs {
		margin: 0 -16px;  // This creates a negative margin to counteract the parent's padding

		.components-tab-panel__tabs {
			padding: 0 16px;  // This sets the actual padding to 16px
		}
	}

	.section-nav__panel {
		padding-right: 0;

		@include breakpoint-deprecated( ">480px" ) {
			padding-right: 16px;
		}
	}
	.segmented-control {
		margin-left: 0;

		@include breakpoint-deprecated( ">480px" ) {
			margin-left: 16px;
		}
	}
	.subscribers-count .button {
		margin-left: 16px;

		@media (max-width: $break-mobile) {
			display: none;
		}
	}
	.stats-navigation__intervals.is-standalone.segmented-control {
		display: flex;

		@include breakpoint-deprecated( ">960px" ) {
			display: none;
		}
	}
	.stats-navigation__intervals.segmented-control {
		display: none;

		@include breakpoint-deprecated( ">960px" ) {
			display: flex;
		}
	}

	&.stats-navigation--improved {
		.full-width {
			width: 100%;
		}

		.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;
				}
			}
		}
	}

	// Modernize styles except for GoogleMyBusinessStats and StatsOverview pages
	&.stats-navigation--modernized {
		// For aligning the `.page-modules-settings` action button.
		position: relative;
		display: flex;
		align-items: center;

		// Only apply these styles when using the new TabPanel navigation
		.stats-navigation__tabs {
			width: calc(100% + 32px);  // Extend width to counter the parent padding
			margin-left: -16px;        // Pull left to counter parent padding
			margin-right: -16px;       // Pull right to counter parent padding
		}

		.section-nav {
			margin: 0;
			box-shadow: inset 0 -1px 0 #0000000d;

			.section-nav__mobile-header > svg {
				margin-left: auto;
			}

			&.is-open {
				@media (max-width: $break-mobile) {
					.subscribers-count {
						&:hover,
						&:focus {
							.button {
								color: var(--color-text-inverted);
							}
						}

						.button {
							display: inline-block;
							padding: 8px;
							color: var(--color-neutral-60);
							font-size: $font-body-small;
							font-weight: 600;
							line-height: 24px;

						}
					}

					& ~ .page-modules-settings {
						position: absolute;
						top: 11px;
						right: 0;
					}


					&:has(+ .page-modules-settings) {
						.section-nav__mobile-header > svg {
							margin-right: 40px;
						}
					}

				}
			}
		}

		.section-nav-group__label {
			padding: 0;
		}

		.section-nav__panel {
			padding: 0;

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

		.section-nav-tab {
			&:not(:first-child) {
				margin-left: 40px;

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

			.section-nav-tab__link {
				padding: 8px 0;
				font-size: $font-body-small;
				line-height: 20px;

				@media (min-width: $break-mobile) {
					&:hover,
					&:focus {
						color: var(--color-neutral-60);
						background-color: var(--color-surface);
					}
				}

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

				@media (max-width: $break-mobile) {
					padding: 8px;
				}
			}

			@media (max-width: $break-mobile) {
				& + .section-nav-tab {
					margin-top: 1px;
				}

				.section-nav-tab__link {
					&:hover,
					&:focus {
						color: var(--color-text-inverted);
						background-color: var(--color-primary);
						opacity: 0.65;
					}
				}
			}

			@include breakpoint-deprecated( ">480px" ) {
				.section-nav-tab__link {
					color: var(--color-neutral-60);
				}
				&.is-selected {
					border-bottom-color: var(--color-neutral-100);

					.section-nav-tab__link {
						color: var(--color-neutral-100);
					}
				}
			}
		}

		.subscribers-count {
			.button {
				font-weight: 400;
				font-size: $font-body-small;
				line-height: 24px;
				color: var(--color-neutral-80);
				margin: 0;
				padding: 7px 12px;
			}

			@media (max-width: $break-mobile) {
				margin-top: 1px; // TODO: remove this after enabling Subscribers page and all nav items are of the same type

				&:hover,
				&:focus {
					color: var(--color-text-inverted);
					background-color: var(--color-primary);
					opacity: 0.65;

					.button {
						color: var(--color-text-inverted);
					}
				}
			}

			.count {
				padding: 0 8px;
				margin-left: 6px;
				border-radius: 2px;
				border: 0;
				background-color: var(--color-neutral-0);
				font-weight: 500;
				font-size: $font-body-extra-small;
				line-height: 20px;
			}
		}
	}
}
