@import "/UI/Theme.scss";

UIModal
{
	@include ui-block;
	flex-direction: column;
	flex-shrink: 0;
	width: 380px;
	max-width: 90vw;
	pointer-events: all;
	font-family: $body-font;
	transition: opacity 0.1s ease-out, transform 0.1s ease-out;

	&:intro
	{
		opacity: 0;
		transform: translateY( 8px );
	}

	> .window
	{
		@include ui-section;
		flex-direction: column;
		padding: 1px;

		> .title-bar
		{
			@include ui-title-bar;
		}

		> .body
		{
			flex-direction: column;
			padding: 10px;
		}
	}

	// a question and the buttons to answer it, from UIModal.Confirm
	&.confirm
	{
		width: 480px;

		.message
		{
			width: 100%;
			justify-content: center;
			text-align: center;
			font-size: $ui-settings-font;
			font-weight: 500;
			color: $ui-text-strong;
		}

		.buttons
		{
			flex-direction: row;
			justify-content: center;
			gap: 8px;

			> UIButton
			{
				width: 146px;
			}
		}
	}
}

// names in the rich text of a question, the tags of rich text only match plain selectors, not ones with the panels around them
b
{
	font-weight: 700;
}