@import "../mmv.mixins";
@import "../mmv.globals";

.mw-mmv-reuse-dialog {
	@divider-border-height: 1px;

	// positioned relative to the reuse button
	bottom: @metadatabar-above-fold-height + @progress-bar-height - 5px;

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

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

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

		.oo-ui-optionWidget {
			@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: 20px;

		&.active {
			display: block;
		}
	}

	.mw-mmv-dialog-down-arrow {
		bottom: @metadatabar-above-fold-height + @progress-bar-height + 5px;
	}
}