@import "/UI/Styles/Theme.scss";

HomeToast
{
	position: absolute;
	left: 0;
	right: 0;
	top: 28px;
	width: 100%;
	height: 72px;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
	z-index: 12;
	pointer-events: none;

	.toast-pill
	{
		width: auto;
		height: 72px;
		border-radius: 36px;
		background-color: rgba( 242, 244, 247, 0.96 );
		box-shadow: 0 10px 34px rgba( 0, 0, 0, 0.38 );
		flex-direction: row;
		align-items: center;
		padding: 0 32px 0 18px;
		gap: 12px;
	}

	.toast-icon
	{
		width: 48px;
		height: 48px;
		border-radius: 24px;
		background-color: rgba( $accent-blue, 0.12 );
		font-family: Material Icons;
		font-size: 29px;
		font-weight: 500;
		color: $accent-blue;
		align-items: center;
		justify-content: center;
		text-align: center;
		flex-shrink: 0;
	}

	.toast-pill.orange .toast-icon
	{
		background-color: rgba( $accent-orange, 0.13 );
		color: $accent-orange;
	}

	.toast-pill.green .toast-icon
	{
		background-color: rgba( $accent-green, 0.13 );
		color: $accent-green;
	}

	.toast-pill.blue .toast-icon
	{
		background-color: rgba( $accent-blue, 0.13 );
		color: $accent-blue;
	}

	.toast-pill.gray .toast-icon
	{
		background-color: rgba( $accent-gray, 0.13 );
		color: $accent-gray;
	}

	.toast-text
	{
		flex-direction: column;
		gap: 2px;
		justify-content: center;
		align-items: flex-start;
	}

	.toast-title
	{
		font-size: 19px;
		font-weight: 600;
		color: #20242a;
		white-space: nowrap;
	}

	.toast-message
	{
		font-size: 14px;
		font-weight: 400;
		color: rgba( 32, 36, 42, 0.64 );
		white-space: nowrap;
	}
}