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

.reset-special-page-heading-styles() {
	// Reset .mw-mf-special #content_wrapper styles for headers...
	// FIXME: Bad defaults.
	text-align: left;
	font-family: @fontFamilyHeading;
	line-height: 1.3em;
	margin: 0;
}
.reset-link-styles() {
	a, a:visited, a:hover {
		color: inherit;
		text-decoration: none;
	}
}


/**
 * Common components to Collection page and List of collections page.
 */

.collections-pagination {
	text-align: center;
}

.collection-card {
	// Don't split items between css columns
	display: inline-block;
	width: 100%;
}

/*
 *  Collection page
 */
.collection {

	&.content {
		// No spacing between title and content (we want meta info of collection
		// close to title
		margin-top: 0;
		padding-top: 0;
	}

	.collection-moderation {
		padding: 1em 0;
		position: absolute;
		right: 0;
		div {
			float: left;
		}
		.mw-ui-icon-element:before {
			top: 0;
		}
	}

	.collection-header {
		text-align: center;
		padding: 0 1em;
		margin-bottom: 2em;

		h1 {
			font-weight: bold;
		}

		.collection-description {
			color: @grayMediumLight;
		}

		.collection-privacy {
			display: inline-block;
			background-color: #000;
			padding: .2em 0.8em;
			border-radius: .2em;
			color: @grayMediumLight;
			text-transform: uppercase;
			font-weight: 500;
			font-size: .7em;
			margin-bottom: 1em;
		}

		.collection-owner {
			margin-top: 1em;

			.collection-owner-icon {
				display: inline-block;
				vertical-align: top;
				width: 1.7em;
				min-width: 1.7em;
				margin-top: 1px;
			}
		}

		.collection-actions {
			margin-top: 0.5em;
			display: none;

			&.visible {
				display: block;
			}
		}

		.collection-action-button {
			padding: 0.5em 2em;
			margin: 0 0.25em;
		}
	}

	.collection-empty {
		text-align: center;
		* {
			font-family: @fontFamily;
		}
		h3 {
			padding-bottom: 0em;
		}
		h6 {
			font-size: 0.8em;
		}
	}

	.collection-card {
		@collectionItemPadding: 1em;

		border: 1px solid @grayLightest;
		padding: 0 @collectionItemPadding;
		margin-bottom: 2em;

		.list-thumb {
			height: 300px;
			margin: 0 -@collectionItemPadding;
			background-size: cover;
		}

		.collection-card-title {
			font-size: 2em;
			padding-bottom: 0;
			.reset-special-page-heading-styles();
			// FIXME: Why is this inconsistent with other headings colors
			color: black;
			.reset-link-styles();
			a {
				&.new {
					color: #ba0000;
				}
			}
		}

		.collection-card-footer {
			// Make footer run to edges
			margin: 1em -@collectionItemPadding 0;
			padding: @collectionItemPadding;
			text-align: right;
			border-top: 1px solid @grayLightest;
			font-weight: bold;

			& * {
				// Align the items on the footer
				display: inline-block;
				vertical-align: bottom;
			}

			.collections-read-more-arrow {
				// Need a small icon size
				width: 1.5em;
				min-width: 1.5em;

				&:before {
					// FIXME: mw-ui icons assume square/horizontal icons, this svg
					// (next.svg) is vertical, so we have to switch the background-size.
					// This shouldn't be necessary, either fix the icon(?) or mw-ui to
					// support vertical icons.
					background-size: auto 100%;
					// Fix icon spacing
					margin-left: 0.5em;
					margin-right: 0;
				}
			}
		}
	}
}


/*
 *  List of collections
 */
.collections-list {

	@overlayHeight: 6em;

	.collection-card {
		height: (@overlayHeight + 8em);
		border: 1px solid @grayLightest;
		position: relative;
		margin-bottom: 1em;

		&.without-image {
			border-width: 0px;
			// If there is no image on the card, then make it as big as the overlay
			height: @overlayHeight;
		}
	}

	.collection-card-image {
		// Make the link and div with the image fully expand
		&, &>div {
			position: absolute;
			top: 0; right: 0; left: 0; bottom: 0;
			background-size: cover;
		}
	}

	.collection-card-overlay {
		position: absolute;
		height: @overlayHeight;
		background: rgba(0, 0, 0, 0.8);
		padding: 1em;
		bottom: 0;
		left: 0;
		right: 0;

		.collection-owner {
			margin-left: .2em;
			display: inline-block;
		}

		a,
		span {
			color: #FAF9F9;
			padding: 0 0.25em;
		}
	}

	.collection-card-title {
		font-size: 2em;
		padding-bottom: 0;
		color: #FAF9F9;
		.reset-special-page-heading-styles();
		.reset-link-styles();
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.collection-actions {
		text-align: center;
	}

	// User or collections not found
	&.not-found {
		text-align: center;
	}

}

/**
 * Tablet styles
 */

// Cards responsive behavior
@columns: 2;
@media all and (min-width: @deviceWidthTablet) {
	.collection-cards {
		-webkit-columns: @columns;
		-moz-columns: @columns;
		columns: @columns;
	}
}