@use 'sass:math';
@import '@automattic/components/src/horizontal-bar-list/stats-variables';

// Module Content List
.module-content-list {
	padding: 0;
	margin: 0 0 0.5em;
	list-style-type: none;

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

	.stats-module.is-loading &-legend {
		display: block;
	}
}

// Module Content List Item

.module-content-list-item {
	// Smaller font-size for narrower, two-column modules
	font-size: $font-body-small;
	line-height: 40px;

	// List item height shorter on 2-column modules
	@include breakpoint-deprecated( '>960px' ) {
		.stats__module-list & {
			font-size: $font-body-extra-small;
			line-height: 28px;
		}
	}

	border-top: 1px solid color-mix( in srgb, var( --color-surface ) 0%, transparent );

	// Increase touch targets on mobile
	@include breakpoint-deprecated( '<480px' ) {
		line-height: 48px;
		border-top: 1px solid var( --color-neutral-0 );

		&:first-child {
			border-top-color: color-mix( in srgb, var( --color-surface ) 0%, transparent );
		}

		// Darken color for sublists
		.module-content-list-sublist & {
			border-top-color: var( --color-neutral-0 );
		}
	}

	&.disabled {
		.stats-list__module-content-list-item-label,
		.stats-list__module-content-list-item-value {
			opacity: 0.15;
			transition: opacity 0.3s ease 0.15s;
		}

		.module-content-list-item-right {
			&::before {
				display: none;
			}
		}

		.module-content-list-item-actions {
			cursor: pointer;
			opacity: 1;
			transition: opacity 0.3s ease 0.15s;
			position: relative;
			right: -20px;
		}
	}
}

// Module Content List Item Wrapper
// (wrapper element, what's actually hovered for each list item)

.stats-list__module-content-list-item-wrapper,
.module-content-list-item-wrapper {
	@extend %mobile-interface-element;
	background: var( --color-surface ); // Default non-active color
	display: block;
	line-height: inherit;
	clear: both; // To make sure no rows overlap no matter the circumstances
	padding: 0 24px;

	span {
		font-size: $font-body-small;
		// Always let child elements inherit line heights
		line-height: inherit;
	}

	@include breakpoint-deprecated( '>960px' ) {
		.stats__module-list & {
			line-height: 28px;

			span {
				font-size: $font-body-extra-small;
				// Always let child elements inherit line heights
				line-height: inherit;
			}
		}
	}

	// Post was published within the selected period
	// 1: Move so far out left that only half the icon is showing to reduce footprint
	.module-content-list-item.published & {
		box-shadow: inset 4px 0 0 var( --color-primary );
	}
}

// Module Content List Item Hover

@include breakpoint-deprecated( '>480px' ) {
	.module-content-list .stats-list__module-content-list-item-wrapper:hover,
	.module-content-list-item-link .stats-list__module-content-list-item-wrapper:hover {
		&,
		.module-content-list-item-right {
			background-color: var( --color-neutral-0 );
		}

		.module-content-list-item-action .module-content-list-item-action-wrapper {
			opacity: 1;
		}

		.module-content-list-item-right::before {
			background-image: linear-gradient(
				to right,
				color-mix( in srgb, var( --color-neutral-0 ) 0%, transparent ) 0%,
				var( --color-neutral-0 ) 90%
			);
		}

		// Display hidden actions
		.module-content-list-item-action-hidden {
			display: inline-block;
		}
	}
	.module-content-list-item-link .module-content-list-item-action-wrapper:focus {
		opacity: 1;
	}

	// Don't show hover on legend row
	.module-content-list.module-content-list-legend {
		.stats-list__module-content-list-item-wrapper:hover {
			&,
			.module-content-list-item-right,
			.module-content-list-item-right::before {
				background: none;
			}
		}
	}
}

// Module Content List Item Focus
// Active on non-links as well so you can easily go to them and digest information

.module-content-list-item .stats-list__module-content-list-item-wrapper:focus {
	&,
	.module-content-list-item-right {
		background-color: var( --color-neutral-0 );
	}

	.module-content-list-item-right::before {
		background-image: linear-gradient(
			to right,
			color-mix( in srgb, var( --color-neutral-0 ) 0%, transparent ) 0%,
			var( --color-neutral-0 ) 90%
		);
	}

	// Display hidden actions
	.module-content-list-item-action-hidden {
		display: inline-block;
	}
}

// Highlight toggle icon if item has a sublist

@include breakpoint-deprecated( '>480px' ) {
	.module-content-list
		> .module-content-list-item-toggle
		> .stats-list__module-content-list-item-wrapper:hover
		.stats-list__module-content-list-item-label::before {
		color: var( --color-link-dark );
	}
}

.module-content-list
	> .module-content-list-item-toggle
	> .stats-list__module-content-list-item-wrapper:focus
	.stats-list__module-content-list-item-label::before {
	color: var( --color-link-dark );
}

// Module Content List Item Label
// 1: To create the illusion that text is fading out (break up even long chunks of text)
// 2: ### always has to be the line-height -- could we sync up with a variable?

.stats-list__module-content-list-item-label {
	display: block;
	overflow: hidden;
	word-break: break-all; // 1
	height: 40px; // 2

	// List item height shorter on 2-column modules
	@include breakpoint-deprecated( '>960px' ) {
		.stats__module-list & {
			height: 28px;
		}
	}

	@include breakpoint-deprecated( '<480px' ) {
		height: 48px; // ### see ^
	}

	// Icons
	.stats-list__icon,
	.gridicon,
	.stats-icon {
		margin-right: 8px;
	}

	.stats-list__flag-icon {
		position: relative;
		display: inline-block;
		background-size: contain;
		background-position: 50%;
		background-repeat: no-repeat;
		width: 24px;
		height: 18px;
		top: 3px;
		margin-right: 8px;
	}

	.stats-list__icon {
		position: relative;
		display: inline-block;
		width: 24px;
		height: 24px;
		overflow: hidden;
		vertical-align: middle;
		min-width: 24px;
		line-height: inherit;

		img {
			display: block;
			background: var( --color-surface );
			position: relative;
			width: 20px;
			height: 20px;
		}

		// Hide for user avatars
		.followers &,
		.top-authors &,
		.stats__author-views & {
			background: none;

			&::before {
				content: none;
			}
		}
	}

	.gridicon,
	.stats-icon {
		vertical-align: middle;
	}

	// Icons smaller on 2col
	@include breakpoint-deprecated( '>960px' ) {
		.stats__module-list & .stats-list__icon {
			font-size: $font-title-small;
			line-height: 1.3;
		}

		.stats__module-list & .gridicon {
			width: 18px;
			height: 18px;
		}
	}

	.avatar {
		width: 24px;
		height: 24px;
	}

	.avatar-user {
		border-radius: 8px;
	}

	.user-selectable & {
		-webkit-user-select: text;
		-khtml-user-select: text;
		-moz-user-select: text;
		-ms-user-select: text;
		user-select: text;
	}

	// Label sections: For when multiple data points are displayed in one expandable list item
	.module-content-list-item-label-section {
		margin-right: 11px;
		padding-right: 12px;
		border-right: 1px solid var( --color-neutral-0 );

		&:last-child {
			margin: 0;
			padding: 0;
			border: none;
		}
	}
}

// Module Content List Item Right column

.module-content-list-item-right {
	position: relative;
	float: right;
	background: var( --color-surface );
	margin-left: -48px; // ### keep? experimental: to force labels to go longer than they normally would to make sure the fade out shows

	@include breakpoint-deprecated( '>960px' ) {
		.stats__module-list & {
			height: 28px;
		}
	}

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

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

// Module Content List Item Value
// 1: Makes secondary actions aligned up to values of '99,999' or a string like '99 hours'
.stats-list__module-content-list-item-value {
	display: inline-block;
	text-align: right;
	min-width: 44px; // 1

	.followers & {
		min-width: 60px; // 1
	}
}

// Module Content List Item Actions (in right column)
// Actions list
ul.module-content-list-item-actions {
	display: inline-block;
	margin: 0 0.5em 0 0;

	// ### guess we need to abstract this to a mixin since its repeated now
	// ### this should be fixed but refraining since we're going to use
	// the popover and select UI patterns more closely in the future
	&.collapsed {
		@include dropdown-menu;

		background: var( --color-neutral-0 );
		display: none;
		z-index: z-index( 'root', 'ul.module-content-list-item-actions.collapsed' );
		margin: 0;
		top: 30px;
		right: auto;
		left: -172px; // module-content-list-item-right is relative, so this is min-width 220px - action width 48px = 172

		.module-content-list-item-right.is-expanded & {
			display: inline-block;
		}

		&::after {
			border-bottom-color: var( --color-neutral-0 );
			right: 18px; // Logically this should be 24px but thanks to the borders (?) 18px is actually centered
			left: auto;
		}

		.module-content-list-item-action-wrapper,
		ul.module-content-list-item-action-submenu {
			display: block;
			opacity: 1;
			text-align: left;
		}

		// If displayed in a sublist or otherwise expanded item, swap background color
		.module-content-list-item-toggle.is-expanded & {
			background-color: var( --color-surface );

			&::after {
				border-bottom-color: var( --color-border-inverted );
			}
		}
	}

	@include breakpoint-deprecated( '<480px' ) {
		@include dropdown-menu;

		background: var( --color-neutral-0 );
		display: none;
		z-index: z-index( 'root', 'ul.module-content-list-item-actions' );
		margin: 0;
		top: 46px;
		right: auto;
		left: -172px; // module-content-list-item-right is relative, so this is min-width 220px - action width 48px = 172

		.module-content-list-item-right.is-expanded & {
			display: inline-block;
		}

		&::after {
			border-bottom-color: var( --color-neutral-0 );
			right: 18px; // Logically this should be 24px but thanks to the borders (?) 18px is actually centered
			left: auto;
		}

		.module-content-list-item-action-wrapper,
		ul.module-content-list-item-action-submenu {
			display: block;
			text-align: left;
		}

		// If displayed in a sublist or otherwise expanded item, swap background color
		.module-content-list-item-toggle.is-expanded & {
			background-color: var( --color-surface );

			&::after {
				border-bottom-color: var( --color-border-inverted );
			}
		}
	}
}

// Actions toggle
// (a toggle that's only shown on smaller screen sizes)
// 1: ### Showing/hiding should not be handled by CSS

.module-content-list-item-actions-toggle {
	cursor: pointer;
	display: none;
	min-width: 24px;
	padding: 0 12px;
	height: 40px;
	line-height: inherit;

	@include breakpoint-deprecated( '>960px' ) {
		.stats__module-list & {
			height: 28px;
		}
	}

	.gridicon,
	.stats-icon {
		vertical-align: middle;
	}

	@include breakpoint-deprecated( '<480px' ) {
		display: inline-block;
		height: 48px;
	}

	// 1
	&.show {
		display: inline-block;
		height: 30px;
	}
}

// Actions Menu
// (Used for links that should be hidden even on desktop)
ul.module-content-list-item-action-submenu {
	display: inline-block;
	list-style: none;
	margin: 0;

	@include breakpoint-deprecated( '>480px' ) {
		@include dropdown-menu;

		display: none;
		z-index: z-index( 'root', 'ul.module-content-list-item-action-submenu' );
		margin: 0;
		top: 32px;
		right: -20px;

		.module-content-list-item-action.hidden-action.is-expanded & {
			display: inline-block;
		}

		&::after {
			right: 24px;
			left: auto;
		}

		.module-content-list-item-action-wrapper {
			display: block;
			text-align: left;
		}
	}
}

// Action
.module-content-list-item-action {
	display: inline-block;
	margin: 0 1em 0 0;

	button {
		cursor: pointer;
	}

	// So that 'View' label is moved more to the right since icon has been dropped
	@include breakpoint-deprecated( '>960px' ) {
		.stats__module-list & {
			margin: 0;
		}
	}

	@include breakpoint-deprecated( '<480px' ) {
		margin-right: 0;
	}

	// Action wrapper, what's actually selected
	.module-content-list-item-action-wrapper {
		@extend %mobile-interface-element;
		text-align: center;
		margin: 0;
		opacity: 0;
		line-height: inherit;

		@include breakpoint-deprecated( '<480px' ) {
			min-width: 24px;
			opacity: 1;
			padding: 0 12px;
			box-sizing: border-box;

			&.toggle {
				display: none;
			}

			&.is-link {
				line-height: inherit;
				padding: 0 12px;
			}
		}

		.module-content-list-item-action-label.unfollow {
			display: none;
		}

		// Hide 'View' label next to icon on 2-column modules
		@media ( min-width: '783px' ) {
			.stats__module-list & span.module-content-list-item-action-label-view {
				display: none;
			}
		}
	}

	// Color follow action when already following
	.module-content-list-item-action-wrapper.following .module-content-list-item-action-label {
		color: var( --studio-white );

		&:hover {
			color: var( --studio-white );
		}
	}

	// Display hidden label and change icon for Unfollow action
	.module-content-list-item-action-wrapper.following:focus,
	.module-content-list-item-action-wrapper.following:hover {
		.module-content-list-item-action-label {
			display: none;
		}

		.module-content-list-item-action-label.unfollow {
			display: inline-block;
		}
	}

	// Optically align a bit better
	.gridicon,
	.stats-icon {
		vertical-align: middle;
		margin-right: 4px;
		margin-top: -2px;

		&.gridicons-cross {
			margin-right: 0;
		}
	}

	// Promote post speaker button should look like a link
	.stats-list__item-action-promote {
		color: var( --color-link );
		cursor: pointer;

		&:hover {
			color: var( --color-link-dark );
		}
	}

	// When a button instead of a link is used
	.button.module-content-list-item-action-wrapper .gridicon {
		vertical-align: unset;
	}

	// Color spam action red
	.module-content-list-item-action-wrapper.spam {
		color: var( --color-error );

		// Hover state
		@include breakpoint-deprecated( '>480px' ) {
			&:hover {
				color: var( --color-error-30 );
			}
		}

		// Focus state
		&:focus {
			color: var( --color-error-30 );
		}
	}
}

// Module Content List style: Legend
// (a legend for the data displayed)

ul.module-content-list-legend {
	padding-top: 0.5em;
	margin-bottom: 0;
}

.module-content-list-legend .module-content-list-item .module-content-list-item-value,
.module-content-list-legend .module-content-list-item .module-content-list-item-label {
	@extend %placeholder;

	color: var( --color-text-subtle );
	font-weight: 600;

	// Limit width when loading for placeholders to take less visual space
	.stats-module.is-loading & {
		max-width: 60px;
	}
}

// Display full action labels in header to use them as legends for the list's actions
.module-content-list-legend
	.module-content-list-item
	.module-content-list-item-action
	.module-content-list-item-action-label {
	@include breakpoint-deprecated( '<480px' ) {
		display: inline;
	}
}

//  Module Content List Item style: Disabled
// (there's absolutely no data or bad error)
// ### Do :empty for value to input N/A? Or placeholder content in general?

.module-content-list > .module-content-list-item-disabled {
	cursor: default;

	.stats-list__module-content-list-item-value,
	.stats-list__module-content-list-item-label {
		color: var( --color-neutral-light );
	}
}

// Module Content List Item style: Large
// (a larger display of a list item, currently only used for the Authors module)

.module-content-list > .module-content-list-item-large {
	> .module-content-list-item-wrapper {
		line-height: 48px;
		@include breakpoint-deprecated( '>960px' ) {
			.stats__module-list & {
				line-height: 28px;
			}
		}
	}

	> .stats-list__module-content-list-item-wrapper .stats-list__module-content-list-item-label {
		height: 48px;
		@include breakpoint-deprecated( '>960px' ) {
			.stats__module-list & {
				height: 28px;
			}
		}
	}

	> .stats-list__module-content-list-item-wrapper
		.stats-list__module-content-list-item-label
		.avatar {
		font-size: $font-title-large;
		margin-right: 10px;
		width: 32px;
		height: 32px;
		@include breakpoint-deprecated( '>960px' ) {
			.stats__module-list & {
				width: 24px;
				height: 24px;
			}
		}
	}

	> .stats-list__module-content-list-item-wrapper
		.stats-list__module-content-list-item-label
		.stats-list__icon {
		font-size: $font-title-large;
		line-height: 32px;
		width: 32px;
		height: 32px;
		@include breakpoint-deprecated( '>960px' ) {
			.stats__module-list & {
				width: 24px;
				height: 24px;
			}
		}
	}

	@include breakpoint-deprecated( '>960px' ) {
		.stats__module-list
			&
			> .stats-list__module-content-list-item-wrapper
			.stats-list__module-content-list-item-label
			.stats-list__icon {
			margin-top: -2px; // Really couldn't figure out a better way to correctly position the avatar
		}
	}

	> .stats-list__module-content-list-item-wrapper
		.stats-list__module-content-list-item-label
		.avatar-user {
		border-radius: 16px;
	}
}

// Module Content List Item style: Link
// (this item has a main action or links somewhere)

.module-content-list > .module-content-list-item-link {
	cursor: pointer;

	&.disabled {
		cursor: default;
	}

	// Change colors to highlight label when row is highlighted
	.stats-list__module-content-list-item-label {
		color: var( --color-primary );
	}

	// Highlight main action (usually what's indicated in the label)

	@include breakpoint-deprecated( '>480px' ) {
		.stats-list__module-content-list-item-wrapper:hover
			.stats-list__module-content-list-item-label {
			color: var( --color-link-dark );
		}
	}

	.stats-list__module-content-list-item-wrapper:focus .stats-list__module-content-list-item-label {
		color: var( --color-link-dark );
	}
}

// Module Content List Item style: Toggle
// (this item's main action is to show an enclosed sublist or something else)

.module-content-list > .module-content-list-item-toggle {
	position: relative;

	// Toggle icon
	> .stats-list__module-content-list-item-wrapper
		.stats-list__module-content-list-item-label
		.gridicons-chevron-down,
	> .stats-list__module-content-list-item-wrapper
		.stats-list__module-content-list-item-label
		.chevron-down {
		vertical-align: middle;
		transition: 0.2s transform ease-out;
		transform: translate3d( 0, 0, 0 );
	}
}

// Active (sublist is showing)
.module-content-list-item-toggle.is-expanded {
	border-top-color: var( --color-neutral-0 );

	> .module-content-list {
		display: block;
	}

	// Lock in hover states to show that the list item is now selected (active)
	&,
	> .stats-list__module-content-list-item-wrapper,
	> .stats-list__module-content-list-item-wrapper .module-content-list-item-right {
		background: var( --color-neutral-0 );
	}

	> .stats-list__module-content-list-item-wrapper .stats-list__module-content-list-item-value {
		color: var( --color-neutral-light );
	}

	> .stats-list__module-content-list-item-wrapper .module-content-list-item-right::before {
		background-image: linear-gradient(
			to right,
			color-mix( in srgb, var( --color-neutral-0 ) 0%, transparent ) 0%,
			var( --color-neutral-0 ) 90%
		);
	}

	// Rotate toggle icon
	> .stats-list__module-content-list-item-wrapper
		.stats-list__module-content-list-item-label
		.gridicons-chevron-down,
	> .stats-list__module-content-list-item-wrapper
		.stats-list__module-content-list-item-label
		.chevron-down {
		transform: rotate( 180deg );
	}

	// Hide the top border of an active sub-list
	> .module-content-list-item {
		border-top-color: color-mix( in srgb, var( --color-surface ) 0%, transparent );
	}

	// Hover changes
	@include breakpoint-deprecated( '>480px' ) {
		> .stats-list__module-content-list-item-wrapper:hover {
			// Change background and gradient color
			&,
			.module-content-list-item-right {
				background-color: var( --color-surface );
			}

			span.module-content-list-item-right::before {
				background-image: linear-gradient(
					to right,
					color-mix( in srgb, var( --color-surface ) 0%, transparent ) 0%,
					var( --color-surface ) 90%
				);
			}
		}
	}
}

// Module Content List: Sublist
// (modified content list fit for sublists to be displayed inside other lists)

.module-content-list-sublist {
	display: none;
	padding: 4px 0;

	// Add more padding for third level nested lists
	.module-content-list-sublist .stats-list__module-content-list-item-wrapper {
		padding-left: 56px;
	}
}

.module-content-list-sublist .module-content-list-item {
	// Change background and gradient color
	> .stats-list__module-content-list-item-wrapper .module-content-list-item-right,
	> .stats-list__module-content-list-item-wrapper {
		background: var( --color-neutral-0 ); // Default non-active color
	}

	.module-content-list-item-right::before {
		background-image: linear-gradient(
			to right,
			color-mix( in srgb, var( --color-neutral ) 0%, transparent ) 0%,
			var( --color-neutral-0 ) 90%
		);
	}

	// Hover changes
	@include breakpoint-deprecated( '>480px' ) {
		&-link .stats-list__module-content-list-item-wrapper:hover,
		&-normal .stats-list__module-content-list-item-wrapper:hover {
			// Change background and gradient color
			&,
			.module-content-list-item-right {
				background-color: var( --color-surface );
			}

			span.module-content-list-item-right::before {
				background-image: linear-gradient(
					to right,
					color-mix( in srgb, var( --color-surface ) 0%, transparent ) 0%,
					var( --color-surface ) 90%
				);
			}
		}
	}
}

.stats-list-actions .module-content-list-item-action .module-content-list-item-action-wrapper {
	opacity: 1;
}

.list-countryviews,
.list-countries,
.list-locations {
	.stats-list__flag-icon {
		position: relative;
		display: inline-block;
		background-size: contain;
		background-position: 50%;
		background-repeat: no-repeat;
		width: 24px;
		height: 18px;
		top: 3px;
		margin-right: 8px;
	}
}

// Add support for ellipsis mobile menu using legacy breakpoint.
.stats-list-actions__mobile-toggle {
	cursor: pointer;
	display: none;

	// Ensure large enough target for touch.
	height: $row-height;
	width: math.div( $row-height * 4, 3 );

	.gridicon,
	.stats-icon {
		fill: var( --color-text-subtle );
		vertical-align: middle;
		transition: fill linear 0.1s;
	}
}

.horizontal-bar-list-item {
	&:hover,
	&:focus {
		.stats-list-actions__mobile-toggle .gridicon,
		.stats-list-actions__mobile-toggle .stats-icon {
			fill: var( --color-text );
		}
	}

	@include breakpoint-deprecated( '>480px' ) {
		.stats-list-actions {
			display: flex;
			align-items: center;
			gap: 6px;
		}
	}
}

@include breakpoint-deprecated( '<480px' ) {
	.horizontal-bar-list-item .horizontal-bar-list-item-bar .horizontal-bar-list--hover-action {
		display: block;
	}
	.stats-list-actions.stats-list-actions--expanded {
		background: var( --color-surface );
		display: block;

		left: auto;
		right: 0;
		top: 100%;

		.stats-list__item-action {
			transition: background-color linear 0.1s;
			&:hover,
			&:focus {
				background: var( --color-neutral-0 );
			}
		}
	}

	.horizontal-bar-list-item .stats-list__item-action-wrapper {
		width: 100%;
	}

	.stats-list-actions__mobile-toggle {
		display: block;
	}
}
