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

.stats-module__date-picker-header {
	margin: 20px 0;

	h3 {
		color: var(--studio-gray-100);
		font-family: Recoleta, "Noto Serif", Georgia, "Times New Roman", Times, serif;
		font-size: 2rem;
		font-weight: 400;
		line-height: 40px;
		margin: 0;
	}

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

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

.videopress-stats-module__grid {
	display: grid;
	grid-template-columns: minmax(200px, 50%) repeat(4, minmax(120px, 1fr));
	grid-auto-rows: min-content;
	gap: 3px;
	padding: 0 0 0.5em;
	font-size: 0.875rem;
	color: var(--color-text);
	min-width: 100%;
	width: fit-content;

	@media screen and (max-width: 450px) {
		grid-template-columns: 40% auto auto auto auto;
	}

	.videopress-stats-module__grid-header {
		font-weight: 500;
		color: var(--studio-gray-100);
		line-height: 20px;
		padding: 0 12px;
		display: flex;
		align-items: center;
		white-space: nowrap;

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

		&.videopress-stats-module__grid-metric {
			text-align: right;
			padding-right: 24px;
			justify-content: flex-end;
		}
	}

	.videopress-stats-module__grid-metric {
		text-align: right;
		padding: 0 24px 0 12px;

		span {
			cursor: pointer;
			display: block;
			width: 100%;
		}
	}

	.videopress-stats-module__grid-link {
		color: var(--color-primary);
		overflow: hidden;
		padding: 0 12px 0 24px;

		.videopress-stats-module__bar-wrapper {
			height: 100%;
		}

		.videopress-stats-module__bar {
			position: relative;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			padding-left: 10px;
			
			span {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				display: block;
				width: 100%;
				cursor: pointer;
				position: relative;
				z-index: 1;
				color: var(--color-text);
				font-size: $font-body-small;
				font-weight: 500;
			}

			&::before {
				content: "";
				position: absolute;
				left: 0;
				top: 0;
				height: 100%;
				width: var(--bar-fill-percentage, 0%);
				background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
				border-radius: 2px;
				transition: background-color 0.2s ease-out;
				z-index: 0;
			}
		}
	}

	.videopress-stats-module__row-wrapper,
	.videopress-stats-module__header-row-wrapper {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: 1 / -1;
	}

	.videopress-stats-module__row-wrapper {
		&:hover {
			background-color: var(--theme-highlight-color);

			.videopress-stats-module__bar::before {
				background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
			}

			.videopress-stats-module__grid-metric span,
			.videopress-stats-module__bar span {
				color: var(--color-text-inverted);
			}
		}
	}
}

.videopress-stats-module__empty-module {
	padding: 4px 24px 24px;
	font-size: $font-body-small;
	font-weight: 400;
	color: var( --studio-gray-60 );
}

.card.is-compact {
	padding: 0;
	border-radius: 4px;
	box-shadow: 0 0 0 1px var(--color-border-subtle);
	
	.videopress-stats-module__grid {
		margin: 0;
	}
}

.section-header {
	&.stats-module__header {
		margin: 0;
		padding: 24px 24px 12px;
		border-bottom: none;
		box-shadow: none;
		
		.section-header__label {
			font-family: $font-sf-pro-display;
			font-size: $font-title-small;
			line-height: 40px;
			font-weight: 500;
			color: var(--color-text);
		}

		.stats-card-header__title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: $font-title-small;
			font-weight: 500;
			color: var(--color-text);

			.stats-card-header__title-nodes {
				display: flex;
				align-items: center;

				.stats-info-area__popover {
					margin-left: 8px;
				}
			}
		}

		.stats-download-csv {
			color: var(--color-link);
			padding-right: 0;

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

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

.videopress-stats-module__grid-cell {
	height: 36px;

	&.videopress-stats-module__grid-metric {
		padding: 0 24px 0 8px;
		display: flex;
		align-items: center;
	}
}
