/*
 * Citizen
 *
 * SkinStyles for Extension:VisualEditor
 * Module: ext.visualEditor.desktopArticleTarget.init
 * Version: REL1_35 cc3466a
 *
 * Date: 2021-08-04
 * Note: VE has many modules so they are combined in one file for now
*/

@import '../../../resources/variables.less';

.ve-activated {
	#page-tools {
		z-index: 1; // Fix collision
		opacity: 1;
		pointer-events: auto;
	}

	// Hide edit buttons since it is handled by the editing mode dropdown in the toolbar
	#ca-ve-edit,
	#ca-edit {
		display: none;
	}

	// HACK: So sticky header will never trigger in edit action
	#citizen-body-header-sticky-sentinel {
		display: none;
	}

	// .mw-body-header .page-actions {
	// 	display: none; // Hide page header
	// }

	.page-heading {
		opacity: 0.5;
	}

	.citizen-toc {
		display: none; // Hide ToC
	}

	.mw-body-content {
		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			display: block;
		}
	}

	&:not( .ve-loading ) {
		.ve-init-mw-desktopArticleTarget-uneditableContent {
			opacity: 1 !important;
			pointer-events: all !important;
		}
	}
}

// Extra selector because I am lazy to break it down to proper RL stylesheets
// TODO: Break down into RL stylesheets when my sins catch up to me
.skin-citizen {
	.ve {
		&-ce {
			&-branchNode {
				&-blockSlug,
				&-newSlug {
					background-color: transparent;
					// outline-color: var(--border-color-base);
				}
			}

			&-linkAnnotation {
				&.ve-ce-annotation-active {
					background-color: var( --background-color-primary--active );
					box-shadow: 0 0 0 1px var( --border-color-base );
				}
			}
		}

		&-ui {
			&-toolbar {
				> .oo-ui-toolbar-bar {
					z-index: 91; // @z-index-site-header - 1
					border-color: var( --border-color-base--darker );
					background-color: var( --color-surface-0 );

					.oo-ui-toolbar-bar {
						border: 0;
						background-color: transparent;
					}

					> .oo-ui-toolbar-tools {
						overflow: auto hidden;
					}

					> .oo-ui-toolbar-actions {
						border-left: 1px solid var( --border-color-base );
					}

					.oo-ui-toolbar-tools {
						display: inline-block;
						white-space: nowrap;
					}

					/* Fix inline height */
					.oo-ui-popupToolGroup-tools.oo-ui-popupToolGroup-active-tools {
						overflow: auto !important;
						height: auto !important;
					}
				}
			}

			&-surface {
				&-visual {
					.ve-ce-documentNode {
						font-size: 1rem; // So that same font size as the actual page
					}
				}
			}

			&-targetWidget {
				border-color: var( --border-color-input );

				&:not( .oo-ui-pendingElement-pending ) {
					background: var( --color-surface-1 );
				}
			}

			&-overlay {
				font-family: var( --fonts-sans );

				&-global {
					z-index: 100;
				}
			}

			&-desktopContext {
				.ve-ui-linkContextItem .ve-ui-linkContextItem-label {
					border-color: var( --border-color-base );
				}
			}

			&-expandableContent {
				&-fade {
					background: linear-gradient( to right, rgba( 255, 255, 255, 0 ) 0, var( --color-surface-1 ) 90% );
				}

				&-toggle {
					background-color: transparent;
				}
			}

			&-mwSaveDialog {
				&-summary {
					background-color: transparent;
				}

				&-options {
					border-color: var( --border-color-base );
					background-color: var( --color-surface-2 );
				}

				&--editSummary-count {
					border-color: var( --border-color-base );
				}

				&-license {
					color: var( --color-base--subtle );
				}

				// Preview and review change panels
				&-savePanel {
					~ .oo-ui-panelLayout {
						background-color: var( --color-surface-0 );
					}
				}

				// Give preview content a max width
				.mw-parser-output {
					max-width: var( --width-layout );
					margin-right: auto;
					margin-left: auto;
				}
			}

			&-mwTransclusion {
				&Dialog-addParameterFieldset .ve-ui-mwParameterSearchWidget {
					border-color: var( --border-color-base );
				}

				&Outline {
					&ButtonWidget {
						&.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
							background-color: var( --background-color-quiet--hover );
							color: var( --color-base--emphasized );
						}

						&.oo-ui-optionWidget-selected .oo-ui-buttonElement-button {
							background-color: var( --background-color-primary--active );
						}
					}

					&TemplateWidget-sticky {
						background-color: var( --color-surface-1 );
					}
				}
			}

			&--mwParameterResultWidget {
				&.oo-ui-optionWidget-highlighted {
					background-color: var( --background-color-primary--hover );
				}

				&-description {
					color: var( --color-base--subtle );
				}
			}

			&-mwTemplatePage-description {
				color: var( --color-base--subtle );
			}
		}
	}

	.oo-ui-toolbar-position-top .ve-ui-toolbarDialog-position-above {
		border-color: var( --border-color-base--darker );
	}

	*:not( .ext-discussiontools-ui-replyWidget-headerWrapper ) {
		> .ve-init-mw-desktopArticleTarget-toolbar-open {
			&:not( .ve-ui-toolbar-floating ) {
				& > .oo-ui-toolbar-bar {
					position: fixed;
					right: 0;
					left: 0;

					.oo-ui-toolbar-actions .ve-ui-toolbar:not( .ve-ui-toolbar-floating ) > .oo-ui-toolbar-bar {
						position: unset;
					}
				}
			}
		}
	}
}

.ve-init {
	&-mw {
		&-desktopArticleTarget {
			&-toolbar {
				&Placeholder {
					height: 46px; // Correspond to VE toolbar height in Citizen
					border-bottom: 1px solid var( --border-color-base );
					margin: 0;

					&-bar {
						border: 0;
						box-shadow: none;
					}

					&-floating {
						.ve-init-mw-desktopArticleTarget-toolbarPlaceholder-bar {
							background: var( --color-surface-0 );
						}
					}
				}

				&.ve-ui-toolbar-floating > .oo-ui-toolbar-bar {
					top: ~'calc( var( --header-size ) )'; // stick to top
					transition: @transition-transform; // Hide toolbar on scroll down
				}
			}
		}

		&-progressBarWidget {
			border-color: var( --color-primary );
			background-color: var( --color-surface-0 );

			&-bar {
				background-color: var( --color-primary );
			}
		}

		// Fix weird compressed text bug
		&-tempWikitextEditorWidget {
			width: 100% !important;
			background: transparent;
		}
	}
}

// Make toolbar more smaller screen friendly
// Well at least I did by best
@media ( max-width: 800px ) {
	// .ve-ui-toolbar-floating {
	// 	z-index: 4;
	// }

	.skin-citizen {
		.ve-ui-toolbar {
			> .oo-ui-toolbar-bar {
				.oo-ui-toolbar-tools {
					display: inline;
					white-space: normal;
				}

				.oo-ui-toolbar-actions {
					display: inline;
					margin-left: 1rem;
					float: unset;
				}
			}
		}
	}

	.ve-init-mw-desktopArticleTarget {
		&-toolbar {
			&.ve-ui-toolbar-floating > .oo-ui-toolbar-bar {
				top: ~'calc( var( --header-size ) - 1px )'; // stick to top
				padding-top: 0;
			}

			.ve-ui-toolbar-group {
				// Hide some dropdown tools in smaller screen
				// help - Help
				&-help {
					display: none;
				}
			}

			// Active state
			.oo-ui-widget-enabled {
				.ve-ui-toolbar-saveButton {
					&::before,
					&::after {
						background: var( --color-base--emphasized );
					}
				}
			}
		}
	}
	// change save button icon from " > " to " < " for RTL language
	.rtl {
		.ve-init-mw-desktopArticleTarget-toolbar {
			.ve-ui-toolbar-saveButton {
				&::before {
					transform: rotate( 45deg );
				}

				&::after {
					transform: rotate( -45deg );
				}
			}
		}
	}

	// HACK: hide special character button on mobile devices
	.ve-ui-toolbar-group-specialCharacter {
		display: none !important;
	}
}

// HACK: hide .mw-editsection-divider
.client-js .mw-editsection-divider {
	display: none !important;
}

// HACK: font-size
/* Essentially revert T182320 (core change) */
.mw-editfont-monospace,
.mw-editfont-sans-serif,
.mw-editfont-serif {
	font-size: inherit;
}
// HACK: .ve-ce-surface padding
.ve-ce-surface {
	padding: 1.5em;
}
