@import 'ext.CollaborationKit.mixins.less';

/* Styles needed when transcluding list content */

.mw-ck-list-item {
	overflow: hidden;
	margin-bottom: 0.5625em;
	position: relative;

	.mw-ck-list-buttonrow {
		display: none;
	}

	.mw-ck-list-container .mw-ck-list-notes p {
		margin: 0.35em 0;
	}
}

.mw-ck-list-item:after {
	content: '';
	background: linear-gradient( to bottom, transparent, #fff );
	height: 50%;
	width: 100%;
	margin-left: 68px;
	position: absolute;
	bottom: 0;
	left: 0;
}

.mw-ck-hub-members .mw-ck-list-item:after {
	background: linear-gradient( to bottom, transparent, #f9f9f9 );
}

.mw-ck-list-item:hover {
	height: auto !important;
	overflow: visible;

	.mw-ck-list-buttonrow {
		display: block;
	}
}

/* Removes the fadeout effect */
.mw-ck-list-item:hover:after {
	display: none;
}

.mw-ck-list-image {
	.grey();
	float: left;
	overflow: hidden;
	padding: 1px;
}
.mw-ck-list-noimageplaceholder {
	width: 64px;
	height: 64px;
	content: '';
	background-size: contain;
	background: #eee 50% 50%;
}
.mw-ck-list-container {
	padding-left: 10px;
	display: table-cell;
	line-height: 1.2;
}
.mw-ck-list-title {
	font-size: 110%;
	font-weight: bold;
}

.mw-ck-list-notes {
	font-size: 90%;
}

/* Multilist stuff */
.mw-ck-multilist {
	.flex-display;
	.flex-wrap;
	margin: 0 -0.5em;

	.mw-ck-list-column {
		float: left; // IE9 workaround, maybe
		.flex();
		margin: 0.5em;
		min-width: 20em; // Todo something smarter for mobile/genuinely narrow things?
		max-width: 35em;
		-webkit-flex-basis: 25em;
		-moz-flex-basis: 25em;
		-ms-flex-basis: 25em;
		flex-basis: 25em;
		box-sizing: border-box;
	}

	.mw-ck-list-notes {
		margin: 0;
	}
	.mw-ck-list-column-header {
		padding: 1.25em 1.5em 0.35em;
		margin: -1.6em -1.6em 1em;
		border-radius: 3px 3px 0 0;
	}
	.mw-ck-list-column-header h3 {
		margin-top: 0;
		padding-top: 0;
	}
}

/* @todo, should maybe replace styling from toccolours with this class */
.mw-ck-list-tags {
	display: inline-block;
}

/* Stuff below here could potentially be in a separate module since
 * its only used on direct page and not when transcluding */

.mw-ck-list:not( .mw-ck-dragging ) .mw-ck-list-movebutton {
	cursor: ns-resize;
	cursor: -moz-grab;
	cursor: -webkit-grab;
	cursor: grab;
}

.mw-ck-dragging {
	cursor: ns-resize;
	cursor: -moz-grabbing;
	cursor: -webkit-grabbing;
	cursor: grabbing;
}

.mw-ck-list-button {
	display: inline-block;
}

/* Unclear if this is a really bad idea, but 24px makes the icon too big */
.mw-ck-list-button .oo-ui-iconElement-icon.oo-ui-iconElement-icon {
	height: 22px;
}

.mw-ck-list-additem {
	margin-top: 2em;
	text-align: center;
}

.mw-ck-list-addself {
	margin-bottom: 0.5em;
}

.mw-ck-list-dragplaceholder {
	background: #eee;
	width: 100%;
}

.mw-ck-list-title .jquery-confirmable-text,
.mw-ck-list-title .mw-spinner {
	padding-left: 0.5em;
}