@switch-color: #f8f9fa;
@active-switch-color: #54595d;
@embed-dimensions-color: #72777d;
@textarea-text-color: #222;

.mw-mmv-reuse-pane {
	.mw-mmv-embed-text-html,
	.mw-mmv-embed-text-wikitext {
		display: none;
		width: auto;

		&.active {
			display: block;
		}

		// The selector has to be that deep and include [readonly] to override OOUI's definition
		textarea[ readonly ] {
			color: @textarea-text-color;
			text-shadow: none;
			word-wrap: break-word;
		}
	}
}

.mw-mmv-reuse-dialog .mw-mmv-embed-pane {
	padding: 20px 27px;

	.mw-mmv-embed-explanation {
		margin: 10px 0 20px 0;
		padding: 0;
	}

	p,
	textarea {
		margin: 0;
	}

	.mw-mmv-dialog-copy {
		float: right;
		width: 1em;
		height: 1em;
		margin: 10px 0.5em 20px 0;
		padding: 0 0 0 5px;
	}
}

.mw-mmv-embed-switch {
	div {
		padding: 1px 3px;
		background-color: @switch-color;

		&.active {
			background-color: @active-switch-color;
		}
	}
}

.mw-mmv-embed-size {
	display: none;
	margin: 10px 0 0 0;

	&.active {
		display: block;
	}

	.oo-ui-widget-disabled {
		display: none;
	}
}

.mw-mmv-embed-dimensions {
	color: @embed-dimensions-color;
	font-size: small;

	.oo-ui-optionWidget-selected & {
		color: lighten( @embed-dimensions-color, 20% ); // selected option has dark background
	}
}