@import 'mediawiki.skin.variables.less';
@import '../../mobile.less/mobile.variables.less';

@itemPaddingV: 0.8em;
@titleMarginV: 0.5em;
@thumbGap: 15px;
@thumbWidth: 70px;
@thumbSpace: @thumbWidth + @thumbGap;

/* stylelint-disable no-descending-specificity */

// Pages

// Lists of pages
//
// Use the mw-mf-page-list class when rendering a list of pages.
// Always render a page-list outside a .content element
//
// Markup:
// <ul class="mw-mf-page-list thumbs">
//  <li class="page-summary">
//    <div class="list-thumb"></div>
//    <div class="title"><h3>San Francisco</h3></div>
//  </li>
//  <li  class="page-summary">
//    <div class="list-thumb list-thumb-x">
//		<span class="mf-icon-image"></span>
//	  </div>
//    <div class="title"><h3>New York</h3></div>
//  </li>
// </ul>
// FIXME: This should be one generic class name only
.mw-mf-page-list,
.topic-title-list,
.site-link-list {
	// needed for rotated watchstars to avoid horizontal scrollbar
	overflow: hidden;

	li {
		color: @color-subtle;
		position: relative;
		border-bottom: @border-width-base @border-style-base @border-color-muted;
		padding-top: @itemPaddingV;
		padding-bottom: @itemPaddingV;
		// avoid the gap between thumbnails
		margin: -1px 0 0;
		line-height: 19px;
		display: flex;
		align-items: center;

		a:not( .cdx-button ),
		.title {
			flex-grow: 1;
			display: block;
			text-decoration: none;
			color: @color-subtle;
		}
	}

	&.thumbs,
	&.side-list {
		li {
			padding-left: @thumbSpace;
		}
	}

	.info {
		font-size: 0.7em;
		text-transform: uppercase;
	}

	// FIXME: Add component class to all info classes in currently defined page-lists
	.info,
	.component {
		color: @color-subtle;
		line-height: 1.2;
	}

	.title {
		h3,
		.mw-mf-user,
		.component,
		.info {
			margin: @titleMarginV 0;
		}
	}

	&.thumbs {
		.title {
			// 22px is the width of the watchlist star, +2px for additional padding
			padding-right: 24px;
		}

		.list-thumb {
			background-color: var( --background-color-neutral );
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	// FIXME: rename to something more general, e.g. .side
	.list-thumb {
		position: absolute;
		width: @thumbWidth;
		height: 100%;
		top: 0;
		left: 0;
	}

	p {
		font-size: 0.9em;
		// See T65610
		line-height: normal;
	}

	&.side-list .list-thumb {
		padding-top: @itemPaddingV;
		padding-bottom: @itemPaddingV;
		color: @color-base;

		p {
			line-height: 1.2;
			margin: 0.5em 0;
		}

		.timestamp {
			// accommodate for higher font-size of h3 to the right of timestamp
			margin-bottom: 0.65em;
		}
	}
}

// FIXME: combine with a similar pattern in modules/NotificationsOverlay.less
@media all and ( min-width: @min-width-breakpoint-tablet ) {
	// FIXME: this should be one generic class name
	.page-summary-list,
	.topic-title-list,
	.site-link-list {
		padding-top: 0;
		padding-bottom: 0;
	}
}