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

.skin-vector-2022 {
	.ve-editcheck-available & {
		.mw-page-container-inner {
			transition: grid-template-columns 250ms, column-gap 250ms; /* stylelint-disable-line plugin/no-unsupported-browser-features */
		}

		.mw-body {
			transition: padding 250ms;
			padding-right: 0;

			.vector-column-end {
				transition: width 250ms;
			}
		}

		.ve-init-mw-desktopArticleTarget .ve-init-mw-target-surface .ve-ui-sidebarDialog {
			// Sidebar fades in and slides in from the right side of the screen
			margin-right: -300px;
			overflow-x: visible;
			opacity: 0;
			left: 150px;
			transition: opacity 250ms, left 250ms;
		}

		.mw-body .vector-column-end,
		.vector-pinnable-header-pin-button {
			@media screen and ( max-width: 1492px ) {
				// Pre-emptively hide right sidebar below width at which it would start
				// squashing the main content area. Not 100% necessary but reduces amount
				// of movement when EditCheck opens at these widths.
				display: none !important;  /* stylelint-disable-line declaration-no-important */
			}
		}
	}

	.ve-editcheck-enabled &,
	.ve-editcheck-transitioning & {
		.mw-body .vector-column-end,
		.vector-main-menu-landmark,
		.vector-pinnable-header-pin-button {
			// Hide sidebars during transitions as they reflow their own text when the change width
			display: none !important;  /* stylelint-disable-line declaration-no-important */
		}
	}

	/* stylelint-disable-next-line selector-not-notation */
	.ve-editcheck-enabled:not( .vector-feature-main-menu-pinned-disabled.vector-toc-not-available, .vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-clientpref-0 ) & {
		.mw-page-container-inner {
			// At maximum width:
			// 7rem is approximate half the difference between the maximum width
			// of the main page container and VE + EditCheck, so this places VE
			// in the center. Using a numeric value for centering allows the
			// transition to animate correctly.
			grid-template-columns: ~'7rem minmax( 0, 1fr )';
			column-gap: 0;

			@media screen and ( max-width: @max-width-breakpoint-desktop ) {
				// Width constrained by viewport:
				// Calculate centering value as ( 100vw - <VE+EC width> ) / 2
				grid-template-columns: ~'calc(50vw - 44rem) minmax( 0, 1fr )';
			}
		}
	}

	.ve-editcheck-enabled & {
		.mw-body {
			// Padding to prevent EditCheck sidebar from going off screen
			padding-right: 300px;
		}

		.ve-init-mw-desktopArticleTarget .ve-init-mw-target-surface .ve-ui-sidebarDialog {
			opacity: 1;
			left: 0;
		}
	}

	.ve-editcheck-transitioning.vector-feature-main-menu-pinned-disabled.vector-toc-not-available &,
	.ve-editcheck-enabled.vector-feature-main-menu-pinned-disabled.vector-toc-not-available &,
	.ve-editcheck-transitioning.vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-clientpref-0 &,
	.ve-editcheck-enabled.vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-clientpref-0 & {
		@media screen and ( min-width: @min-width-breakpoint-desktop ) {
			.mw-body {
				padding-right: 0;
			}
		}

		.mw-body .vector-column-end {
			display: block !important;  /* stylelint-disable-line declaration-no-important */
			visibility: hidden;
			width: 300px;
		}
	}
}

/* Toolbar */

.ve-ui-editCheck-toolbar-tools {
	display: flex;

	.ve-ui-toolbar-group-title {
		font-weight: bold;
		flex: 5 !important; /* stylelint-disable-line declaration-no-important */
		line-height: 3em;
		text-align: center;
	}
}

/* Actions */

.ve-ui-editCheckDialog {
	&-footer {
		display: flex;
		justify-content: flex-end;
		gap: 0;

		> .oo-ui-labelWidget {
			align-content: center;
			margin-right: @spacing-50;
			color: @color-subtle;

			&.oo-ui-widget-disabled {
				color: @color-disabled;
			}
		}
	}

	.ve-ui-editCheckActionWidget {
		/**
		 * Increase specificity over core styles in case they are
		 * loaded later, such as on Special:EditChecks where order
		 * can't be guaranteed.
		 */
		&.oo-ui-messageWidget {
			box-sizing: border-box;
			white-space: normal; // Minerva needs this
			margin: @spacing-50 0;
			padding: @spacing-50 @spacing-75;
			cursor: pointer;
			overflow: hidden;
			border-radius: @border-radius-base;
		}

		> .oo-ui-iconElement-icon {
			// Fixes icon placement in WMUI theme
			top: -@spacing-50;
		}

		> .oo-ui-labelElement-label {
			font-weight: @font-weight-semi-bold;
		}

		&-body {
			cursor: auto;
			background-color: @background-color-base;
			margin: @spacing-50 -@spacing-75 -@spacing-50 -@spacing-75;
			padding: @spacing-75;

			/* Progress bar positioning within the margin and without causing layout changes */
			position: relative;

			> .oo-ui-progressBarWidget {
				position: absolute;
				width: 100%;
				top: 0;
				left: 0;
			}
		}

		&-prompt {
			margin-bottom: @spacing-75;
			font-weight: @font-weight-semi-bold;
			display: block;
		}

		&-actions {
			margin-top: @spacing-100;
			/* for when buttons wrap to multiple lines */
			margin-bottom: -@spacing-25;

			.oo-ui-actionWidget {
				/* for when buttons wrap to multiple lines */
				margin-bottom: @spacing-25;
			}

			&-prompted {
				margin-top: @spacing-75;
			}
		}

		&-footer {
			margin-top: @spacing-100;
			color: @color-subtle;
		}

		&:not( .ve-ui-editCheckActionWidget-collapsed ) {
			box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.2 );
		}

		&.oo-ui-flaggedElement-progressive {
			border-color: @border-color-progressive;
			background: @background-color-progressive-subtle;

			> .oo-ui-labelElement-label {
				font-weight: normal;
			}
		}

		&.ve-ui-editCheckActionWidget-collapsed {
			&:not( :hover ) {
				background: @background-color-base;
				border-color: @border-color-base;

				&.oo-ui-flaggedElement-progressive {
					border-color: @border-color-muted;
				}
			}

			> .ve-ui-editCheckActionWidget-body {
				display: none;
			}
		}

		&.oo-ui-flaggedElement-warning {
			border-color: @border-color-warning;

			> .ve-ui-editCheckActionWidget-head {
				background-color: @background-color-warning-subtle;
			}
		}

		&.oo-ui-flaggedElement-error {
			border-color: @border-color-error;

			> .ve-ui-editCheckActionWidget-head {
				background-color: @background-color-error-subtle;
			}
		}

		&.oo-ui-flaggedElement-success {
			border-color: @border-color-success;

			> .ve-ui-editCheckActionWidget-head {
				background-color: @background-color-success-subtle;
			}
		}

		&.oo-ui-flaggedElement-notice {
			border-color: @border-color-notice;

			> .ve-ui-editCheckActionWidget-head {
				background-color: @background-color-notice-subtle;
			}
		}

		.ve-ui-editCheckActionWidget-feedback {
			.oo-ui-fieldLayout-header,
			.oo-ui-radioSelectWidget {
				padding-bottom: @spacing-100;
			}

			.oo-ui-labelElement-label {
				font-size: inherit;
			}
		}

		.ve-ui-editCheckActionWidget-feedback ~ * {
			display: none;
		}

		&-suggestion {
			&-feedbackMenu {
				position: absolute;
				right: @spacing-75;
				bottom: @spacing-75;
			}

			.ve-ui-editCheckActionWidget-actions {
				margin-right: 2.2em;
			}
		}
	}

	&.ve-ui-editCheckDialog-singleAction .ve-ui-editCheckActionWidget-collapsed {
		display: none;
	}

	// See: .ve-ui-mobileContext, which this is closely mimicking
	.mw-mf & {
		top: auto;
		/* Match toolbar border & shadow */
		border-top: @border-subtle;
		box-shadow: 0 -1px 1px 0 rgba( 0, 0, 0, 0.1 );
		/* Transition out faster, as keyboard may be coming up */
		transition: transform 100ms;
		transform: translateY( 0% );
		// See: .ve-init-mw-target-surface in ve.init.mw.MobileArticleTarget.less
		max-width: calc( 993.3px + (2 * 1em) );
		margin: 0 auto;

		&-close,
		&-collapseExpand {
			position: absolute;
			right: 0;
			top: 2px;
			z-index: 1;
		}

		&-footer {
			border-top: @border-subtle;
			padding: @spacing-12 @spacing-100;
		}

		&.ve-ui-editCheckDialog-collapsed {
			display: block;
			transition: transform 250ms;
			transform: translateY( calc( 100% - 2.5em ) );
		}

		.oo-ui-window-body {
			padding: 0;
		}

		.ve-ui-editCheckActionWidget {
			margin: 0;
			padding: 0.5em 1em;
			border-width: 0;
			box-shadow: none;
			background-color: transparent !important;  /* stylelint-disable-line declaration-no-important */

			/* Matches .ve-ui-mobileContext .ve-ui-linearContextItem-body */
			&-body {
				border-top: @border-subtle;
				background-color: transparent;
				margin: 0.5em -1em 0 -1em;
				padding: 0.5em 1em;
			}
		}
	}
}

.mw-mf .ve-ce-surface-reviewMode.ve-ce-surface-deactivated {
	// Otherwise the content will be covered by the mobile context at the end
	// of the document. (Upstream this?)
	margin-bottom: 100%;
}

/* Mobile sidebar */

.ve-ui-editCheck-gutter-active {
	div.ve-ui-gutterSidebarEditCheckDialog {
		background-color: @background-color-interactive-subtle;

		.ve-ui-editCheck-gutter-action {
			position: absolute;
			width: 42px;
			text-align: center;
			margin-top: -3px;
			min-height: 24px;

			> .oo-ui-iconElement-icon {
				width: 20px;
				height: 20px;
				margin-top: -4px;
			}

			label {
				position: absolute;
				top: 16px;
				right: 5px;
				display: block;
				border-radius: 3px;
				background-color: @accent-color-base;
				color: @color-inverted;
				font-size: @font-size-x-small;
				line-height: 0.9;
				padding: 3px;
			}

			&-error {
				border-left: 2px solid @color-error;
			}

			&-warning {
				border-left: 2px solid @color-warning;
			}

			&-progressive {
				border-left: 2px solid @color-progressive;
			}

			&-quickaction {
				border-left: 0;

				.oo-ui-buttonElement-button {
					background: @background-color-progressive;
					margin-top: -6px;
				}

				.oo-ui-widget-disabled .oo-ui-buttonElement-button {
					background: @background-color-disabled;
				}
			}
		}
	}
}

.ve-editcheck-available .mw-mf .ve-ce-surface {
	margin-right: 16px;
}

@media all and ( max-width: 993.4px ) {
	.ve-editcheck-available .mw-mf {
		.ve-init-mw-target-surface {
			margin: 0 0 1em;
		}

		.ve-ce-surface,
		.ve-ui-surface-placeholder {
			// Stop reflow during the transition
			max-width: calc( 100% - (44px + 16px + 16px) );
			margin: 0 16px 0 32px;
		}

		.ve-ui-editCheck-sidebar-active .ve-ce-surface {
			margin-left: 16px;
		}

		.ve-ui-editCheck-sidebar-active .ve-init-mw-target-surface {
			margin: 0;
		}
	}
}

@media all and ( min-width: 993.4px ) and ( max-width: @min-width-breakpoint-desktop ) {
	.mw-mf .ve-ui-editCheck-sidebar-active .ve-ui-sidebarDialogWindowManager {
		margin-right: -44px;
	}
}

@media all and ( min-width: @min-width-breakpoint-desktop ) {
	/* stylelint-disable-next-line selector-class-pattern */
	.mw-mf .ve-ui-editCheck-sidebar-active .overlay-content {
		width: auto;
	}
}

/* Selections */

.ve-ce-surface-selections-editCheck {
	&-active,
	&-inactive {
		.ve-ce-surface-selection {
			&-rects {
				opacity: 0.2;
			}

			&-rect {
				border-radius: 2px;
				padding: 2px;
				margin: -2px 0 0 -2px;
			}
		}
	}

	&-active {
		.ve-ce-surface-selection {
			&-bounding {
				@padding: 3px;
				@border: 2px;
				@color: #36c;
				padding: @padding;
				margin: -( @padding + @border ) 0 0 -@padding;
				border-style: solid;
				border-color: @color;
				border-width: @border 0;
				@triangleSize: 5px;

				&::before,
				&::after {
					content: '';
					position: absolute;
					width: 0;
					height: 0;
				}

				&::before {
					left: 0;
					top: 0;
					border-left: @triangleSize solid @color;
					border-bottom: @triangleSize solid transparent;
				}

				&::after {
					right: 0;
					bottom: 0;
					border-right: @triangleSize solid @color;
					border-top: @triangleSize solid transparent;
				}
			}

			&-editCheck-pending .ve-ce-surface-selection-bounding {
				border-color: @color-disabled;

				&::before {
					border-left-color: @color-disabled;
				}

				&::after {
					border-right-color: @color-disabled;
				}
			}
		}

		.ve-ce-surface-selection-gutter {
			background-color: @color-base;
			z-index: 1;
		}

		.ve-ce-surface-selection-editCheck {
			&-warning .ve-ce-surface-selection-rect {
				// Adjust target colours to account for 50% opacity
				// @background-color-warning-subtle
				background: ( ( #fdf2d5 - 0.7 * ( #fff ) ) / 0.3 );
			}

			&-error .ve-ce-surface-selection-rect {
				// @background-color-error-subtle
				background: ( ( #ffe9e5 - 0.7 * ( #fff ) ) / 0.3 );
			}

			&-progressive .ve-ce-surface-selection-rect {
				// @background-color-progressive-subtle
				background: ( ( #e8eeff - 0.7 * ( #fff ) ) / 0.3 );
			}
		}
	}

	&-inactive {
		.ve-ce-surface-selection-rect {
			// @background-color-interactive-subtle
			background: ( ( #f8f9fa - 0.9 * ( #fff ) ) / 0.1 );
		}
	}
}

.ve-ce-surface-selection-editCheck {
	&-warning .ve-ce-surface-selection-gutter {
		background-color: @color-warning;
	}

	&-error .ve-ce-surface-selection-gutter {
		background-color: @color-error;
	}

	&-progressive .ve-ce-surface-selection-gutter {
		background-color: @color-progressive;
	}
}