@import "../mmv.mixins";

.mw-mmv-reuse-dialog {
	@background-color: rgb(255, 255, 255);
	@shadow-color: #aaaaaa;
	@border-radius: 3px;
	@divider-border-height: 1px;
	@dialog-width: 450px;
	@dialog-height: 350px;

	// positioned relative to the metadata panel
	position: absolute;
	right: 5px;
	top: -1 * (@dialog-height + 5px);
	width: @dialog-width;
	height: @dialog-height;
	background-color: @background-color;
	box-shadow: 0 2px 0 @shadow-color;
	.box-round(@border-radius);

	.mw-mmv-reuse-tabs {
		@divider-color: rgb(204, 204, 204);

		position: static;
		box-shadow: none;
		border-bottom: @divider-border-height solid @divider-color;
		.box-round(@border-radius @border-radius 0 0);

		.oo-ui-iconedElement-icon.oo-ui-icon-check {
			display: none;
		}

		li {
			@tab-border-height: 3px;
			@highlighted-tab-color: rgb(225, 243, 255);
			@selected-tab-color: rgb(0, 113, 188);

			display: inline-block;
			padding: 10px 25px;

			font-size: 1.2em;

			&.oo-ui-optionWidget-highlighted {
				border-bottom: (@tab-border-height - @divider-border-height) solid @highlighted-tab-color;
			}

			&.oo-ui-optionWidget-selected,
			&.oo-ui-optionWidget-highlighted.oo-ui-optionWidget-selected {
				border-bottom: @tab-border-height solid @selected-tab-color;
			}

			&:first-child {
				.box-round(@border-radius 0 0 0);
			}
		}
	}

	.mw-mmv-reuse-pane {
		display: none;
		padding: 10px 20px;

		&.active {
			display: block;
		}
	}

	.mw-mmv-reuse-down-arrow {
		@arrow-size: 20px;
		@arrow-border-color: #aaaaaa;
		@arrow-border-size: 2px;

		background-color: @background-color;
		width: @arrow-size;
		height: @arrow-size;
		border-right: @arrow-border-size solid @arrow-border-color;
		border-bottom: @arrow-border-size solid @arrow-border-color;
		.rotate(45deg);
		position: absolute;
		// horizontal positioning will be done in JS
		bottom: -1 * ( @arrow-size / 2 ) - @arrow-border-size;
	}
}