@import "@automattic/color-studio/dist/color-variables";
@import "@automattic/typography/styles/variables";
@import "@wordpress/base-styles/breakpoints";
@import "client/assets/stylesheets/p2-vars";
@import "client/landing/subscriptions/styles/row-title-label";
@import "./placeholders";


.site-subscriptions-list {
	margin: 0 0 32px 0;

	.row {
		border-block-end: 1px solid $studio-gray-5;
		padding-top: 20px;
		padding-bottom: 20px;
		@extend %site-subscriptions-list-default-text;

		* {
			flex: 1;
		}

		&.header {
			padding-bottom: $font-code;
			padding-top: 0;

			@media (max-width: $break-small) {
				display: none;
			}
		}

		&.deleted {
			opacity: 0.5;
		}

		.title-cell {
			display: flex;
			align-items: center;
			flex: 2.3;
			min-width: 0;
		}

		.title-icon {
			display: flex;
			flex: 0;
			min-width: 40px;
		}

		.title-column {
			display: flex;
			flex-direction: column;
			min-width: 0;
			padding-left: 12px;
		}

		.title-name {
			@extend %site-subscriptions-list-site-title;

			.p2-label {
				@extend %p2-label;
			}

			.paid-label {
				@extend %paid-label;
			}

			.rss-label {
				@extend %rss-label;
			}

			.gift-label {
				@extend %gift-label;
			}
		}

		.title-url {
			@extend %site-subscriptions-list-site-url;
		}

		.new-posts-cell,
		.new-comments-cell {
			.green,
			.red {
				margin-top: 4px;
				vertical-align: text-bottom;
			}

			.green {
				fill: var(--color-success);
			}

			.red {
				fill: var(--color-error);
			}
		}

		.recommend-cell {
			display: flex;
			align-items: center;

			&[role="columnheader"] span {
				display: flex;

				.site-subscriptions-list__recommend-tooltip-icon {
					cursor: pointer;
					flex: 0.5;

					@media (max-width: $break-huge) {
						display: none;
					}
				}
			}

			@media (max-width: $break-xlarge) {
				display: none;
			}
		}

		.actions-cell {
			flex-basis: 36px;
			flex-grow: initial;
			margin: 0 5px;

			.gridicon {
				fill: $studio-gray-50;
			}
		}
	}

	// Compact layout adjustments
	&.site-subscriptions-list--compact {
		.title-cell {
			flex: 2; // Give more space to title in compact layout
		}
	}

	@media (max-width: $break-xlarge) {
		.new-comments-cell {
			display: none;
		}
	}

	@media (max-width: $break-large) {
		.new-posts-cell,
		.email-frequency-cell {
			display: none;
		}
	}

	@media (max-width: $break-small) {
		.date-cell {
			display: none;
		}
	}
}

.new-comments-tooltip__content {
	width: 200px;
}

div[id^="portal/tooltip"] .components-tooltip.site-subscriptions-list__recommend-tooltip {
	font-size: $font-body-small;
	max-width: 250px;
	text-align: left;
}
