@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: 0; // OOUI override
		border-bottom: @divider-border-height solid @divider-color;
		border-radius: @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: #2a4b8d;

			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 {
				border-radius: @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;
	}
}