@import 'mediawiki.skin.variables.less';
@import 'mediawiki.mixins.less';

@font-size-description: 12px;
@line-height-description: 1.2;

.ext-templatedata-search-field {
	margin-bottom: @spacing-150;

	.oo-ui-fieldLayout-header .oo-ui-labelElement-label {
		font-weight: @font-weight-bold;
	}
}

.ext-templatedata-search {
	// Max width to match .oo-ui-actionFieldLayout.oo-ui-fieldLayout-align-top
	max-width: 50em;

	.ext-templatedata-search-description,
	.ext-templatedata-search-redirectedfrom {
		color: @color-subtle;
		display: block;
		font-size: @font-size-description;
		line-height: @line-height-description;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.ext-templatedata-search-description {
		@max-lines: 2;
		display: -webkit-box;
		max-height: @max-lines * unit( @line-height-description, em );
		-webkit-line-clamp: @max-lines;
		-webkit-box-orient: vertical;
	}

	.ext-templatedata-search-redirectedfrom {
		display: block;
		font-style: italic;
		white-space: nowrap;
	}

	.ext-templatedata-TemplateMenuItem {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		// Don't use a pointer cursor on items which are not draggable.
		cursor: default;

		.oo-ui-draggableElement-handle {
			visibility: hidden;
		}

		&:hover .oo-ui-draggableElement-handle {
			visibility: visible;
		}

		&.oo-ui-draggableElement-placeholder {
			background-color: @background-color-interactive-subtle--hover;
		}

		.oo-ui-buttonElement-button {
			padding: 0;
			// Duplicate min sizes from OOUI's WikimediaUI theme because Apex is different.
			min-width: 32px;
			min-height: 32px;
		}
	}

	.oo-ui-comboBoxInputWidget .oo-ui-iconElement-icon {
		// HACK: This should be fixed in OOUI; the icon is behind
		// the input rather than in front
		z-index: 1;
	}

	// Remove border and background from favorite buttons within the search results. T390018.
	.oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-menuSelectWidget .oo-ui-inputWidget-input {
		border-color: transparent;
		background: none;
		box-shadow: none;
	}

	.oo-ui-indexLayout-stackLayout > .oo-ui-panelLayout {
		padding: 0;
	}

	.ext-templatedata-templateDiscovery-tabIcon {
		margin-bottom: @spacing-35;
	}

	.ext-templatedata-TemplateList-empty.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-notice {
		margin-top: @spacing-50;
		border-width: 0;
		background: none;
	}

	.ext-templatedata-TemplateList-count.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-notice {
		margin-top: @spacing-50;
		border-width: 0;
		background: none;
	}

	.ext-templatedata-TemplateMenuItem-removed {
		opacity: 0.5;
		text-decoration: line-through;
	}
}

.ext-templatedata-TemplateList-configLink {
	text-align: right;
}