$button-inactive: red !default;
$button-inactive-bottom: $button-inactive !default;
$button-inactive-fg: white !default;

$button-active: green !default;
$button-active-fg: black !default;

$button-size: 50px;

.clicky
{
	cursor: pointer;

	&:hover
	{
		sound-in: ui.button.over;
	}

	&:active
	{
		sound-in: ui.button.press;
	}
}

.actions
{
	button
	{
		background-color: #3171E6;
		color: white;
		font-size: 15px;
		font-weight: bold;
		padding: 10px 30px;
		border-radius: 8px;
		cursor: pointer;
		opacity: 0.8;
		border: 3px solid transparent;
		margin-right: 10px;

		&:hover
		{
			opacity: 1;
		}

		&:active
		{
			transform: scale( 0.9 );
		}

		&.is-cancel
		{
			background-color: #555;
			color: #aaa;
		}

		pointer-events: all;

		&.is-danger
		{
		}
	}
}


Button
{
	align-items: center;
	gap: 8px;
	cursor: pointer;
	padding: 8px 16px;
}

Button i
{
	align-items: center;
}

Button.primary
{
	font-family: Poppins;
	background-color: #3171E6;
	color: white;
	font-size: 14px;
	font-weight: bold;
	padding: 4px 16px;
	border-radius: 8px;
	cursor: pointer;
	border: 3px solid transparent;
	gap: 8px;

	&:hover {
		filter: brightness( 1.5 );
	}

	&.active {
		filter: brightness( 2.5 );
		color: white;
	}

	IconPanel {
		font-size: 28px;
		opacity: 0.5;
	}

	label {
		flex-grow: 1;
		text-align: center;
	}
}

Button.uplight
{
	color: #c6d4ee;
	border-bottom: 4px solid #477fe700;
	cursor: pointer;
	transition: all 0.2s ease;

	IconPanel
	{
		color: #697180;
	}

	padding: 8px;
	gap: 8px;
	transition: all 0.2s ease;
	text-shadow: 2px 2px 2px #0003;
	padding: 8px 24px;

	&:hover
	{
		color: white;
	}

	&.active
	{
		background-image: linear-gradient( #477fe722, #477fe766 );
		border-bottom: 4px solid #477fe7aa;
		color: white;

		IconPanel
		{
			color: #477fe7;
		}
	}
}