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

@itemPaddingV: 20px;
@thumbGap: 15px;
@thumbWidth: 70px;
@thumbSpace: @thumbWidth + @thumbGap;
@thumbOverlayWidth: @searchBarPaddingLeft;
@thumbOverlaySpace: @thumbOverlayWidth + @thumbGap;


.list-header {
	font-weight: bold;
	font-size: .85em;
	padding: .5em @contentMargin .4em;
	background-color: @grayLightest;
	color: @grayMedium;
}

.listThumb {
	background-repeat: no-repeat;
	background-position: 50% 50%;
	&.needsPhoto {
		.background-size(100%, auto);
		background-color: #3b6fba;
		background-image: url(../specials/images/camera.png);
	}
}

.listThumbH {
	.background-size(auto, 100%);
}

.listThumbV {
	.background-size(100%, auto);
}

// 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>
//    <div class="listThumb"></div>
//    <div class="title"><h2>San Francisco</h2></div>
//  </li>
//  <li>
//    <div class="listThumb needsPhoto"></div>
//    <div class="title"><h2>New York</h2></div>
//  </li>
// </ul>
//
// Styleguide 5.
.page-list {
	// needed for rotated watchstars to avoid horizontal scrollbar
	overflow: hidden;

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

		> a {
			display: block;
			color: #666;

			&:active,
			&:hover,
			&:visited {
				text-decoration: none;
				color: #666;
			}
		}
	}

	&.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 {
			.watchlist-heading();
		}
	}

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

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

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

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

	p {
		font-size: .9em;
		// FIXME: remove when new watchlist in stable
		line-height: normal;
	}

	// FIXME: remove when new watchlist in stable
	.mw-mf-comment {
		margin: .25em 0 0;
	}

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

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

	.mw-mf-user {
		margin: .5em 0 0;
	}
}