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

// TODO: Replace static color values as soon as a drag bar and its design tokens
// have been defined in Codex.

// The dimensions of the UI affordance (the little line in the draggable area).
@affordance-width: 4px;
@affordance-length: 52px;
@background-color-wikieditor-resizing-dragbar: @background-color-interactive;
@background-color-wikieditor-resizing-dragbar-ew: @background-color-interactive-subtle;
@background-color-wikieditor-resizing-dragbar-drag: @background-color-disabled;
@background-color-wikieditor-resizing-dragbar-drag--hover: @color-subtle;

.ext-WikiEditor-ResizingDragBar {
	background-color: @background-color-wikieditor-resizing-dragbar;
	display: flex;
	align-items: center;
	justify-content: center;

	&-ns {
		cursor: ns-resize;
	}

	span {
		width: @affordance-length;
		height: @affordance-width;
		background-color: @background-color-wikieditor-resizing-dragbar-drag;
		border-radius: @border-radius-base;
		display: block;
		margin: 2px;
	}

	&:hover span {
		background-color: @background-color-wikieditor-resizing-dragbar-drag--hover;
	}

	&-ew {
		cursor: ew-resize;
		background-color: @background-color-wikieditor-resizing-dragbar-ew;

		span {
			height: @affordance-length;
			width: @affordance-width;
			border-width: 0 @border-width-base;
		}
	}
}

// This is needed to make the CodeMirror editor height constrained to .wikiEditor-ui-text
// This only is needed when the ResizingDragBar is enabled.
.cm-editor {
	// stylelint-disable-next-line declaration-no-important
	height: 100% !important;
}