@import 'mediawiki.skin.variables.less';
@import '../mmv.variables.less';

@background-color: @background-color-base;
@dialog-width: 450px;

/* Flexbox gap not supported in all browsers */
.mw-mmv-dialog {
	position: fixed;
	right: @buttons-offset-edge + @buttons-offset-each + ( @arrow-size / 2 );
	display: none;
	width: @dialog-width;
	height: @dialog-height;
	background-color: @background-color;
	box-shadow: @box-shadow-drop-xx-large;
	z-index: 1004;

	.mw-mmv-dialog-down-arrow {
		right: @buttons-offset-edge + @buttons-offset-each;
		background-color: @background-color;
		width: @arrow-size;
		height: @arrow-size;
		transform: rotate( -45deg );
		position: fixed;
	}

	.mw-mmv-dialog-warning {
		background-color: @background-color-warning-subtle;
	}

	.mw-mmv-pt-0 {
		padding-top: 0;
	}

	.mw-mmv-pb-0 {
		padding-bottom: 0;
	}

	.mw-mmv-mt-75 {
		margin-top: @spacing-75;
	}

	.mw-mmv-mb-75 {
		margin-bottom: @spacing-75;
	}

	.mw-mmv-pb-150 {
		padding-bottom: @spacing-150;
	}

	.mw-mmv-gap-50 {
		gap: @spacing-50;
	}

	.mw-mmv-flex {
		display: flex;
	}

	.mw-mmv-flex-grow-1 {
		flex-grow: 1;
	}

	.cdx-button__icon--copy {
		.cdx-mixin-css-icon( @cdx-icon-copy, @param-is-button-icon: true );
	}
}