@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;
		}
	}

	/* 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;
		}
	}
}

/* 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;
	}
}

/* Switch to full page buttons */
.ve-ui-editCheck-editFullPage-indicator {
	margin: 0 -@spacing-25 0 10px;
	border-left: @spacing-25 solid transparent;
	box-shadow: -1px 0 0 @border-color-base;
	position: relative;

	&::after {
		content: '';
		display: block;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		position: absolute;
		right: 0;
		background: @background-color-progressive;
		border: 1px solid @border-color-inverted;
	}
}

body:not( .skin-monobook ) .oo-ui-tool-name-editCheckSuggestions {
	& > .oo-ui-tool-link > .oo-ui-iconElement-icon::before {
		content: '';
		display: block;
		height: 100%;
		/* Difference between icon width (20) and overlay width (26) divided by 2 to center */
		margin: 0 -3px;
		background: url( ../images/lightbulb-rays.svg ) 50% 50% no-repeat;
		/* Animation */
		background-size: 50%;
		opacity: 0;
		transition-property: background-size, opacity;
		transition-duration: @transition-duration-medium;
	}

	&.oo-ui-tool-active > .oo-ui-tool-link > .oo-ui-iconElement-icon::before {
		background-size: 100%;
		opacity: 1;
	}

	& > .oo-ui-tool-link > .oo-ui-iconElement-icon::after {
		content: attr( data-count );
		display: block;
		position: absolute;
		text-align: center;
		padding: 1px;
		min-width: 11px;
		left: 12px;
		bottom: 1px;
		border: 1px solid @border-color-inverted;
		border-radius: @border-radius-base;
		background-color: @background-color-progressive;
		color: @color-inverted;
		font-size: @font-size-x-small;
		font-weight: bold;
		transition-property: background-color, border-color, color;
		transition-duration: @transition-duration-base;
	}

	&.oo-ui-tool-active > .oo-ui-tool-link > .oo-ui-iconElement-icon::after {
		background-color: @background-color-progressive-subtle;
		border-color: @border-color-progressive;
		color: @color-progressive;
	}

	/* Hide when no count set yet, or count is 0 and tool isn't active */
	& > .oo-ui-tool-link > .oo-ui-iconElement-icon:not( [ data-count ] )::after,
	&:not( .oo-ui-tool-active ) > .oo-ui-tool-link > .oo-ui-iconElement-icon[ data-count='0' ]::after {
		display: none;
	}
}

/* Actions */

.ve-ui-editCheck-scrollIntoView {
	position: fixed;
	box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.2 );
	opacity: 0;
	transition-property: opacity, transform;
	transition-duration: @transition-duration-base;
	white-space: nowrap;

	&-top {
		top: @spacing-200;
		transform: translateX( -50% ) translateY( calc( -100% - @spacing-200 ) );

		&.ve-ui-editCheck-scrollIntoView-visible {
			opacity: @opacity-base;
			transform: translateX( -50% ) translateY( 0 );
		}
	}

	&-bottom {
		bottom: @spacing-200;
		transform: translateX( -50% ) translateY( calc( 100% + @spacing-200 ) );

		&.ve-ui-editCheck-scrollIntoView-visible {
			opacity: @opacity-base;
			transform: translateX( -50% ) translateY( 0 );
		}
	}

	.oo-ui-buttonElement-button {
		/* Fix height rounding error in Minerva, could be upstreamed to OOUI */
		min-height: 2.25em;
	}

	/**
	 * Same border-radius is applied to all these elements to ensure that the trimmed-off corner
	 * areas don't capture clicks
	 */
	&,
	.oo-ui-buttonElement-framed:first-child,
	.oo-ui-buttonElement-framed:first-child .oo-ui-buttonElement-button {
		border-bottom-left-radius: 1.6em;
		border-top-left-radius: 1.6em;
	}

	&,
	.oo-ui-buttonElement-framed:last-child,
	.oo-ui-buttonElement-framed:last-child .oo-ui-buttonElement-button {
		border-bottom-right-radius: 1.6em;
		border-top-right-radius: 1.6em;
	}
}

.ve-ui-editCheckDialog {
	.ve-ui-editCheck-scrollIntoView {
		margin-left: 150px;
	}

	&-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 {
		transition-property: background, border-color;
		transition-duration: @transition-duration-base;

		/**
		 * 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;
			}
		}

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

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

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

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

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

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

		&.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-scrollIntoView {
			left: 50%;
			margin-top: 48px;
		}

		.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 {
			&-rect {
				border-radius: 2px;
				padding: 2px;
				margin: -2px 0 0 -2px;
				transition: background @transition-duration-base;
			}
		}
	}

	&-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;
		}
	}

	&-active .ve-ce-surface-selection-editCheck,
	&-inactive .ve-ce-surface-selection-editCheck-highlighted.ve-ce-surface-selection-editCheck {
		&-warning .ve-ce-surface-selection-rect {
			background: @background-color-warning-subtle;
		}

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

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

	&-inactive {
		.ve-ce-surface-selection {
			transition: opacity @transition-duration-base;
			opacity: @opacity-medium;
		}

		.ve-ce-surface-selection-editCheck-highlighted {
			opacity: @opacity-base;
		}

		.ve-ce-surface-selection-rect {
			background: @background-color-interactive;
		}
	}
}

.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;
	}
}
