
.stats-module {
	.upsell-nudge.card {
		margin: 16px;
	}
}

// Select Dropdown
.stats-module__select-dropdown-wrapper {
	padding: 16px;
	text-align: center;

	.select-dropdown__container {
		position: relative;
	}

	.stats-module.is-loading &,
	.stats-module.has-no-data & {
		display: none;
	}
}

.card.stats-module {
	padding: 0;
	margin-bottom: 10px;
	overflow-x: auto;
}
// Site sections
.stats__module-list {
	@include clear-fix;
}

.stats-insights__nonperiodic {
	&.has-no-recent {
		color: var(--color-neutral-70);

		p {
			@include breakpoint-deprecated( "<660px" ) {
				margin-left: 24px;
				margin-right: 24px;
			}

			@include breakpoint-deprecated( "<480px" ) {
				text-align: center;
			}
		}
	}
}

// Section title
@keyframes stats-date-picker__spin {
	100% {
		transform: rotate(360deg);
	}
}

.stats-section-title {
	@include heading;

	@include breakpoint-deprecated( "<660px" ) {
		margin-left: 24px;
		margin-right: 24px;
	}

	@include breakpoint-deprecated( "<480px" ) {
		text-align: center;
	}
}

// Module Expand
// (link that shows only if there are more results than we can show in the overview)

.module-expand {
	line-height: 40px;
	display: block;

	@include breakpoint-deprecated( "<480px" ) {
		line-height: 48px;
	}

	.stats-module.is-loading &,
	.stats-module.has-no-data & {
		display: none;
	}

	a {
		@extend %mobile-link-element;
		border-top: 1px solid var(--color-border-subtle);
		display: block;
		font-size: $font-body-small;
		padding: 0 24px;
		position: relative;

		// Hover state
		@include breakpoint-deprecated( ">480px" ) {
			&:hover {
				background: var(--color-neutral-0);
				border-top-color: var(--color-border-inverted);
			}
		}

		// Focus state
		&:focus {
			background: var(--color-neutral-0);
			border-top-color: var(--color-border-inverted);
		}

		@include breakpoint-deprecated( ">960px" ) {
			.stats__module-list & {
				font-size: $font-body-extra-small;
			}
		}
	}

	.right {
		color: var(--color-neutral-light);
		position: absolute;
		right: 24px;
		top: 0;
	}
}

// Module Header

.module-header {
	background: var(--color-surface);
	height: 40px;
	line-height: 40px;
	padding-left: 24px;
	position: relative;

	.stats-module.is-loading & {
		cursor: default;
		height: 40px;
	}

	.stats-module.summary & {
		cursor: default;
	}
}

// Module Header Title
// 1: If really long titles wrap, hide the excess

.module-header-title {
	@extend %mobile-interface-element;
	@extend %placeholder;

	color: var(--color-neutral-70);
	font-weight: 600;
	height: 40px; // 1
	overflow: hidden; // 1
	width: auto;
}

// Module Header Actions
// 1: To align optically to right line and create bigger touch target
// 2: So the focus outline isn't covered by the fading pseudo-element

ul.module-header-actions {
	background: var(--color-surface);
	height: 40px;
	list-style: none;
	margin: 0;
	position: absolute;
	right: 0;
	top: 0;

	// Fade really long module titles
	&::before {
		@include stats-fade-text( color-mix(in srgb, var(--color-surface) 0%, transparent), var( --color-surface ) );
	}

	.module-header-action {
		display: inline-block;

		&:last-child .module-header-action-link {
			&,
			&::after {
				padding-right: 12px; // 1
			}
		}

		.summary &.toggle-services {
			display: none;
		}
	}

	.gridicon {
		vertical-align: middle;

		.stats-module.is-loading & {
			animation: loading-fade 1.6s ease-in-out infinite;
		}

		.stats-module.is-loading &:hover::before,
		.stats-module.is-loading &::before,
		.stats-module.is-loading &:hover,
		.stats-module.is-loading & {
			color: var(--color-neutral-0);
			fill: var(--color-neutral-0);
		}
	}

	.module-header-action-link {
		@extend %mobile-interface-element;
		color: var(--color-neutral-light);
		display: inline-block;
		height: 40px;
		line-height: 40px;
		min-width: 40px;
		position: relative; // 2
		text-align: center;
		z-index: z-index("root", "ul.module-header-actions .module-header-action-link"); // 2

		.stats-module.is-loading & {
			cursor: default;
		}
	}

	// Hover state
	@include breakpoint-deprecated( ">480px" ) {
		.stats-module:hover & .module-header-action-link {
			color: var(--color-primary);
		}

		.module-header & .module-header-action-link:hover {
			color: var(--color-link-dark);
		}
	}

	// Focus state
	.module-header & .module-header-action-link:focus {
		color: var(--color-link-dark);
	}

	// Info button
	.toggle-info {
		&,
		.stats-module.is-loading & {
			display: none;
		}

		.stats-module.is-expanded & {
			display: inline-block;
		}
	}

	// Toggle
	.toggle-services .gridicon {
		transition: 0.2s transform ease-out;
		transform: translate3d(0, 0, 0);
	}

	.stats-module.is-expanded & .toggle-services .gridicon {
		transform: rotate(180deg);
	}
}

.module-content .upsell-nudge.card {
	margin: 16px;
}

// Module Content Text

.module-content-text {
	box-sizing: border-box;
	color: var(--color-neutral-70);
	font-size: $font-body-small;
	padding: 16px 16px 0;
	min-height: 1em;
	width: 100%;
	text-align: center;

	a {
		display: block;

		@include breakpoint-deprecated( ">480px" ) {
			display: inline;
		}
	}

	@include breakpoint-deprecated( ">960px" ) {
		.stats__module-list & {
			font-size: $font-body-extra-small;
		}
	}

	// Don't show text when loading, even if it's info text and the module is empty
	.stats-module.has-no-data &,
	.stats-module.is-loading & {
		display: none;
	}

	// Hidden info box
	&-info {
		background: var(--color-neutral-0);
		box-shadow: inset 0 1px 0 var(--color-neutral-0);
		color: var(--color-neutral-70);
		display: none;
		position: relative;

		.stats-module.is-showing-info & {
			display: inline-block; // 1
		}

		.stats-module.is-loading.is-showing-info & {
			display: none; // 2
		}
	}

	ul,
	ol {
		margin: 0;
	}

	// Representation of what the published status looks like within a list of posts and pages
	.legend.published {
		border-left: 4px solid var(--color-primary);
		padding-left: 12px;
	}

	.legend.achievement {
		color: var(--color-warning);
	}

	// Hide legends if there is no data
	.stats-module.has-no-data & .legend {
		display: none;
	}

	.gridicon {
		margin-right: 4px;
		vertical-align: middle;
	}

	// List of associated FAQ items, support pages, tips and tricks, etc
	.documentation {
		list-style: none;

		li {
			font-size: $font-body-small;
			/* stylelint-disable-next-line declaration-property-unit-allowed-list */
			line-height: 2em;

			@include breakpoint-deprecated( ">960px" ) {
				.stats__module-list & {
					font-size: $font-body-extra-small;
				}
			}

			@include breakpoint-deprecated( "<480px" ) {
				border-bottom: 1px solid var(--color-border-subtle);

				&:last-child {
					border: 0;
					margin-bottom: -12px;
				}
			}
		}

		a {
			@extend %mobile-link-element;
			display: block;
			position: relative;
			padding: 6px 0;

			@include breakpoint-deprecated( "<480px" ) {
				padding-top: 12px;
				padding-bottom: 12px;
			}
		}
	}
}

// Module Content Table
.stats-detail__row-label {
	font-weight: 600;
}

.module-content-table {
	position: relative;

	.module-content-table-scroll {
		min-height: 210px;
		overflow: auto;
		overflow-x: auto;
		overflow-y: visible;
	}

	// Table cells
	// 1: Make sure table cells are always only on one line, otherwise the sticky left tds don't have the right size
	// 2: Make right padding much greater to accommodate for increased gradient
	td,
	th {
		border-bottom: 1px solid var(--color-border-subtle);
		border-right: 1px solid var(--color-border-subtle);
		font-size: $font-body-extra-small;
		padding: 8px 12px;
		white-space: nowrap; // 1

		&:first-child {
			padding-left: 24px;
		}

		&:last-child {
			border-right: none;
			padding-right: 60px; // 2
		}
	}

	tbody tr:last-child th,
	tbody tr:last-child td {
		border-bottom: none;
	}

	tbody th:first-child {
		background: var(--color-surface);
		position: absolute;
		z-index: z-index("root", ".module-content-table tbody th:first-child");
	}

	&.is-fixed-row-header {
		/**
		Use of .is-fixed-row-header requires the first cell in each row to be `th` element
		 */
		th:first-child {
			width: 34px; // 24 (margin-left) + 12 (margin-right) + 1 (border) + 34 = 70
			background: var(--color-surface);
			position: sticky;
			left: 0;
			z-index: z-index("root", ".module-content-table tbody th:first-child");
		}

		th,
		td {
			vertical-align: bottom; // Doesn't work in FireFox without this bit
		}
	}

	// Left this modifier as-is because these tables are likely going to change
	// a lot or otherwise be removed, and at least it's directly dependent on
	// being associated with a td in this structure
	@include breakpoint-deprecated( ">480px" ) {
		.stats-module & td.has-no-data:hover, // 1
		tbody tr:hover td,
		.stats-module & tbody tr:hover th:first-child {
			background: var(--color-primary-0);
		}

		.stats-module & td.highest-count:hover,
		tbody tr td:hover {
			background: var(--color-primary-0);
			color: var(--color-neutral-70);
		}
	}

	.stats-module & td.highest-count {
		color: var(--color-warning);
		position: relative;
	}

	.spacer {
		color: transparent;
	}

	.stats-detail-weeks__date,
	.stats-detail-weeks__value {
		white-space: nowrap;
	}

	.stats-detail-weeks__value {
		display: block;
		font-size: $font-body-extra-small;

		&.is-rising {
			color: var(--color-success);
		}

		&.is-falling {
			color: var(--color-error);
		}

		&.is-same {
			color: var(--color-neutral-light);
		}

		&.is-rising,
		&.is-falling,
		&.is-same {
			margin-top: -2px;
		}

		.gridicon {
			margin: 0 2px -3px -4px;
			width: 15px;
		}
	}

	thead th,
	.stats-detail-weeks__date {
		color: var(--color-text-subtle);
	}

	.stats-detail-weeks__date {
		display: block;
		font-size: $font-body-extra-small;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}

	// Fade out sides of tables to hint at horizontal scrolling
	// 1: 16px should cover for any scrollbar
	// 2: Much wider to show horizontal scrolling better (since the window loads scrolled to the left)
	&::before,
	&::after {
		content: "";
		display: block;
		position: absolute;
		bottom: 16px; // 1
		left: 0;
		top: 0;
		width: 20px;
		z-index: z-index("root", ".module-content-table::after");
	}

	&::after {
		left: auto;
		right: 0;
		width: 60px; // 2
		@include long-content-fade( $size: 15% );
	}
}

.stats-module__all-time-nav {
	.stats-section-title {
		margin: 0 16px 16px;
	}
}

.stats-module__footer-actions {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;

	.button.stats-download-csv {
		color: var(--color-text-subtle);

		&[disabled],
		&.disabled {
			color: var(--color-neutral-20);
		}

		&:hover:not([disabled]) {
			color: var(--color-text);
		}
	}
}

.stats-module__header.is-refreshing {
	animation: loading-fade 1.6s ease-in-out infinite;
}

.stats__module--insights-unified {
	.card.section-header {
		border-radius: 5px 5px 0 0; /* stylelint-disable-line scales/radii */
		box-shadow: none;
		border: 1px solid var(--studio-gray-5);
		border-bottom: 0;
		margin-bottom: 0;
		padding: 24px 24px 12px;
	}

	.card.section-header + .card {
		border-radius: 0 0 5px 5px; /* stylelint-disable-line scales/radii */
		box-shadow: none;
		border: 1px solid var(--studio-gray-5);
		border-top: 0;
	}

	.section-header__label-text {
		font-size: 20px;
		line-height: 26px;
	}
}

.stats__module--unified {
	.card {
		&:first-child {
			border-radius: 5px 5px 0 0; /* stylelint-disable-line scales/radii */
			box-shadow: none;
			border: 1px solid var(--studio-gray-5);
			border-bottom: 0;
			margin-bottom: 0;
			padding: 24px 24px 12px;
		}

		&:last-child {
			border-radius: 0 0 5px 5px; /* stylelint-disable-line scales/radii */
			box-shadow: none;
			border: 1px solid var(--studio-gray-5);
			border-top: 0;
		}

		&:first-child:last-child {
			border-radius: 5px; /* stylelint-disable-line scales/radii */
		}
	}

	.card__link-indicator {
		top: 6px;
	}

	.section-header__label-text,
	.stats-list__module-content-list-item-value {
		font-weight: 500;
		color: var(--studio-gray-100);
	}

	.section-header__label-text {
		font-size: 20px;
		line-height: 26px;
	}

	.stats-list__module-content-list-item-value,
	.stats-list__module-content-list-item-wrapper span,
	.module-content-list-item-wrapper span {
		font-size: 14px;
		line-height: 20px;
		white-space: nowrap;
	}

	.stats-list__module-content-list-item-wrapper > span {
		display: flex;
		align-items: center;

		svg {
			flex: 0 0 auto; // don't shrink svg next to a long label
		}
	}

	.module-content-list-legend {
		padding: 0;

		.module-content-list-item-label,
		.module-content-list-item-value {
			color: var(--studio-gray-100);
		}
	}

	.module-content-list {
		margin: 0;

		&:last-child {
			margin-bottom: 24px;
		}

		&.module-content-list-sublist {
			padding: 4px 0;
		}
	}

	.stats-module .module-expand {
		margin: 20px 0;

		a {
			border: 0;
			font-size: 14px;
			font-weight: 600;
			line-height: 20px;
			color: var(--studio-gray-100);
			padding-top: 4px;
			padding-bottom: 4px;
		}
	}

	.stats-tabs,
	.stats-tab:last-child {
		border-radius: 0 0 5px 5px; /* stylelint-disable-line scales/radii */
	}
}

.stats-content-promo {
	.promo-card-block {
		border-radius: 5px; /* stylelint-disable-line scales/radii */
		margin: 0;
	}
}

.stats-module__footer-actions--summary {
	padding-top: 24px;
}

.stats-module__footer-actions--summary-tall {
	padding-top: 24px;
}

.stats-module__header-nav-button {
	display: flex;
	justify-content: center;
	flex-direction: column;
}
