@import "minerva.variables";
@import "minerva.mixins";

@itemPaddingV: .8em;
@titleMarginV: .5em;
@thumbGap: 15px;
@thumbWidth: 70px;
@thumbSpace: @thumbWidth + @thumbGap;
@thumbOverlayWidth: @searchBarPaddingLeft;
@thumbOverlaySpace: @thumbOverlayWidth + @thumbGap;
@pageSummaryHeaderColor: #404040;

// Pages
//
// Styleguide 5.

// Lists of pages
//
// Use the page-list class when rendering a list of pages.
// Always render a page-list outside a .content element
//
// Markup:
// <ul class="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-none list-thumb-x"></div>
//    <div class="title"><h3>New York</h3></div>
//  </li>
// </ul>
//
// Styleguide 5.2.
// FIXME: This should be one generic class name only
.page-list,
.topic-title-list,
.site-link-list {
	// needed for rotated watchstars to avoid horizontal scrollbar
	overflow: hidden;

	li {
		color: @colorGray6;
		position: relative;
		border-bottom: solid 1px @grayLightest;
		padding: @itemPaddingV @contentMargin;
		// avoid the gap between thumbnails
		margin: -1px 0 0;
		line-height: 1;

		// FIXME: use more generic class here to apply to any icon in a page list
		.watch-this-article {
			position: absolute;
			right: 0;
			top: @itemPaddingV;
			// undo thumbnail damage
			margin-top: 1px;

			button {
				position: absolute;
				text-indent: inherit;
				outline: none;
			}
		}

		> a {
			display: block;
			color: @colorGray6;

			&:active,
			&:hover,
			&:visited {
				text-decoration: none;
				color: @colorGray6;
			}
		}
	}

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

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

	.title {

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

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

	&.side-list .list-thumb {
		padding: @itemPaddingV @contentMargin;
		color: @grayDark;

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

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

	// something on watchlist that doesn't exist
	.title.new h3 {
		color: @redBase;
	}

	p {
		font-size: .9em;
		// See bug 63610
		line-height: normal;
	}

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

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

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