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

.ve-ui-mwTransclusionOutlineWidget {
	.ve-ui-mwTransclusionOutline-ariaHidden {
		display: none;
	}

	.ve-ui-mwTransclusionOutlinePartWidget {
		margin-top: 24px;
		margin-bottom: 24px;

		&:first-child .ve-ui-mwTransclusionOutlineButtonWidget {
			margin-top: -24px;
		}

		&:last-child.ve-ui-mwTransclusionOutlineWikitextWidget,
		&:last-child.ve-ui-mwTransclusionOutlinePlaceholderWidget {
			margin-bottom: 0;
		}

		.ve-ui-mwTransclusionOutlineButtonWidget {
			display: block;
			margin-top: -10px;

			&:first-child {
				margin-left: 0;
			}

			> .oo-ui-buttonElement-button {
				display: block;
				overflow: hidden;
				padding: 8px 0 8px 36px;
				// Remove border radius. Border is removed in hover/active states.
				border-radius: 0;
				text-overflow: ellipsis;

				> .oo-ui-iconElement-icon {
					left: 10px;
				}
			}

			// Color styles copied from OO.ui.OutlineOptionWidget with some adjustments:
			// - .oo-ui-optionWidget-highlighted is replaced with :hover
			// - border color is removed
			&:hover {
				> .oo-ui-buttonElement-button {
					background-color: @background-color-interactive;
					color: @color-emphasized;
					border-color: transparent;
				}
			}

			// Color styles copied from OO.ui.OutlineOptionWidget with some adjustments:
			// - .oo-ui-optionWidget-pressed is replaced with .oo-ui-buttonElement-pressed
			&.oo-ui-optionWidget-selected,
			&.oo-ui-buttonElement-pressed {
				> .oo-ui-buttonElement-button {
					background-color: @background-color-progressive-subtle;
					color: @color-progressive;
					border-color: transparent;
				}
			}
		}
	}
}

.ve-ui-mwTransclusionOutlineTemplateWidget {
	&-sticky {
		background-color: @background-color-base;
		.position-sticky();
		top: 0;
		z-index: 1;
	}

	&-no-template-parameters {
		font-style: italic;
		color: @color-subtle;
		margin: 8px 24px 24px 24px;
	}

	&-searchWidget {
		margin: 8px 24px;
		width: auto;

		&:last-child {
			/* Workaround to override oo-ui-inputWidget:last-child rule */
			margin-right: 24px;
		}
	}

	&-no-match {
		font-style: italic;
		color: @color-subtle;
		margin: 8px 24px;
	}

	.ve-ui-mwTransclusionOutlineToggleUnusedWidget {
		margin: -4px 24px 0 24px;

		.oo-ui-labelElement-label {
			white-space: normal;
			overflow-wrap: break-word;
		}
	}

	.ve-ui-mwTransclusionOutlineParameterSelectWidget:focus {
		border-radius: @border-radius-base;
		box-shadow: @box-shadow-inset-small @box-shadow-color-progressive--focus;
		outline: @outline-base--focus;
	}

	.ve-ui-mwTransclusionOutlineParameterWidget {
		overflow: hidden;
		padding-bottom: 8px;
		padding-left: 30px;
		padding-top: 8px;
		text-overflow: ellipsis;
		white-space: nowrap;
		transition-property: background-color, color;
		transition-duration: @transition-duration-base;

		// Color styles copied from OO.ui.OutlineOptionWidget:
		&.oo-ui-optionWidget-highlighted {
			background-color: @background-color-interactive;
			color: @color-emphasized;
		}

		// Color styles copied from OO.ui.OutlineOptionWidget with some adjustments:
		// - .oo-ui-optionWidget-selected is replaced with
		//   .ve-ui-mwTransclusionOutlineParameterWidget-activePage so
		//   that only the active page is highlighted, not all used parameters.
		&.ve-ui-mwTransclusionOutlineParameterWidget-activePage,
		&.oo-ui-optionWidget-pressed {
			background-color: @background-color-progressive-subtle;
			color: @color-progressive;
		}

		&-hasValue {
			font-weight: bold;
		}

		> .oo-ui-labelElement-label {
			cursor: pointer;
			display: inline;
		}

		.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [ type='checkbox' ]:hover + span {
			/* Stronger :hover effect to make the different checkbox/label click regions more obvious */
			border-width: 2px;
		}
	}
}