PasswordGeneratorExtension/src/App.scss

body
{
	margin: 0;
}

main
{
	width: 400px;
	padding: 8px;
	-webkit-user-select: none;
	user-select: none;

	h1, h2, h3, h4, h5, h6, p
	{
		margin: 0;
	}

	// Buy me a coffee button style
	.fui-Button.bmc
	{
		background-color: var(--colorPaletteDarkOrangeBorder2) !important;

		&:hover
		{
			background-color: var(--colorPaletteDarkOrangeForeground1) !important;
		}

		&:active
		{
			background-color: var(--colorPaletteDarkOrangeBackground2) !important;
		}
	}

	// Overrides for default FluentUI styles
	a.fui-Button
	{
		text-decoration: none;
	}

	.fui-Accordion
	{
		section
		{
			margin-bottom: 10px;
		}

		.fui-AccordionHeader__expandIcon > svg
		{
			transition-duration: .5s;
			transition-timing-function: var(--curveDecelerateMax);
		}
	}

	button.fui-Link
	{
		-webkit-user-select: none;
		user-select: none;
	}

	.scaleUpIn
	{
		animation-name: scaleUpInAnim;
		animation-timing-function: var(--curveEasyEaseMax);
		animation-duration: .5s;
	}

	@keyframes scaleUpInAnim
	{
		from
		{
			transform: scale(.5);
			opacity: 0;
		}

		to
		{
			transform: scale(1);
			opacity: 1;
		}
	}

	.spin
	{
		animation-name: spinAnim;
		animation-timing-function: var(--curveEasyEaseMax);
		animation-duration: .5s;
	}

	@keyframes spinAnim
	{
		from
		{
			transform: rotate(0deg);
		}

		to
		{
			transform: rotate(360deg);
		}
	}

	.fadeIn
	{
		animation-name: fadeInAnim;
		animation-timing-function: var(--curveDecelerateMin);
		animation-duration: .5s;
	}

	@keyframes fadeInAnim
	{
		from
		{
			opacity: 0;
		}

		to
		{
			opacity: 1;
		}
	}
}

.stack
{
	display: flex;
	flex-direction: column;

	&.horizontal
	{
		flex-direction: row;
		flex-wrap: wrap;
	}

	&.gap
	{
		gap: 10px;
	}
}