/**
 * These are custom styles designed to supplement styles produced
 * by ResourceLoad or MediaWiki-core.
 **/
@import './mediawiki.ui/components/icons.less';
@import './production-icons.less';

html,
body {
	height: 100%;
	font-family: sans-serif;
}

#root {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 50px;
	padding: 20px;
}

/**
 * Stopping the fade animation to avoid the animation appearing
 * whenever a user types into the "knob" fields and the popup rerenders.
 * NOTE: To test the animation, remove these rules.
 */
.mwe-popups-fade-in-up {
	-webkit-animation: none;
	animation: none;
}

.mwe-popups-fade-in-down {
	-webkit-animation: none;
	animation: none;
}

.storybook-report {
	position: absolute;
	bottom: -20px;
	opacity: 0.5;
	left: 0;
	right: 0;
	height: 20px;
	background: #000;
	color: #fff;

	> span {
		> span {
			display: none;
		}

		&.error {
			background: #a00;
			font-weight: bold;
			color: white;

			> span {
				display: inline;
			}
		}
	}
}

/* show popups by default */
.popups-storybook-example {
	border: solid 1px #aaa;
	padding: 8px;
	display: flex;
	width: 500px;
	height: 550px;
	position: relative;

	&-tall {
		width: 500px;
		height: 300px;
	}

	&-flipped-y > .popups-storybook-link {
		align-self: flex-end;
	}

	&-flipped-x {
		justify-content: flex-end;
	}

	.mwe-popups {
		display: block;
	}
}