/*
 * Citizen
 *
 * SkinStyles for Extension:WikiEditor
 * Module: ext.wikiEditor.realtimepreview
 * Version: REL1_39 02e1c70
 *
 * Date: 2023-06-03
*/

/* RealtimePreview.less */
.ext-WikiEditor-realtimepreview-button {
	&.oo-ui-buttonElement-frameless.oo-ui-labelElement > .oo-ui-buttonElement-button {
		padding-right: 12px;
	}

	&:hover {
		background-color: var( --background-color-quiet--hover );
	}
}

.ext-WikiEditor-realtimepreview-button.oo-ui-toggleWidget-on .oo-ui-labelElement-label {
	margin-left: 6px;
	line-height: 2em; /* Align with VE */
	color: var( --color-primary );
}

.ext-WikiEditor-ResizingDragBar-ns {
	border-top-color: var( --border-color-base );
}

.ext-WikiEditor-realtimepreview-loadingbar div {
	background-color: var( --color-primary );
}

// Cancel out padding added in action.edit to avoid textarea overflow
.ext-WikiEditor-realtimepreview-textbox#wpTextbox1,
.mw-editform .ext-WikiEditor-realtimepreview-textbox#wpTextbox1 {
	padding-bottom: 0;
}

/* ResizingDragBar.less */
.ext-WikiEditor-ResizingDragBar {
	background-color: var( --color-surface-2 );
}

.ext-WikiEditor-ResizingDragBar-ew {
	background-color: var( --color-surface-2 );
}

.ext-WikiEditor-ResizingDragBar span {
	background-color: var( --color-base--subtle );
}

.ext-WikiEditor-ResizingDragBar:hover span {
	background-color: var( --color-base );
}

/* TwoPaneLayout.less */
.ext-WikiEditor-twopanes-TwoPaneLayout {
	.ext-WikiEditor-twopanes-pane1,
	.ext-WikiEditor-twopanes-pane2 {
		border-color: var( --border-color-base );
	}
}

/* ErrorLayout.less */
.ext-WikiEditor-realtimepreview-ErrorLayout {
	background-color: var( --color-surface-2 );
}

/* ManualWidget.less */
.ext-WikiEditor-ManualWidget {
	background-color: var( --color-surface-2 );
	border-color: var( --border-color-base );

	.ext-WikiEditor-realtimepreview-manual-reload {
		color: var( --color-primary );
	}

	&.oo-ui-widget-disabled .ext-WikiEditor-realtimepreview-manual-reload {
		color: var( --color-base--subtle );
	}
}

// Merge dragbar with editoptions
.skin-citizen .mw-editform .editOptions {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}