@switch-color: #f2f2f2;
@active-switch-color: #666;
@embed-dimensions-color: #aaa;
@textarea-text-color: #333;

.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 OOJS UI'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: 0 0 10px 0;
		padding: 0;
	}

	p,
	textarea {
		margin: 0;
	}
}

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

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

.mw-mmv-embed-size {
	display: none;

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