
$snackbar-background-color: $dark !default
$snackbar-color: $dark-invert !default
$toast-background-color: $snackbar-background-color !default
$toast-color: $snackbar-color
$toast-border-radius: $radius !default
$snackbar-border-radius: $radius !default
$all-colors: mergeColorMaps($colors, $shades) !default

.b-notices-container
	position: relative
	.toast
		margin: 2rem
		z-index: 1000
		display: inline-flex
		animation-duration: $speed-slow
		margin: 0.5em 0
		text-align: center
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04)
		border-radius: $toast-border-radius
		padding: 0.75em 1.5em
		background-color: $toast-background-color
		color: $toast-color
		//pointer-events: auto
		opacity: 0.92
		@each $name, $pair in $all-colors
			$color: nth($pair, 1)
			$color-invert: nth($pair, 2)
			&.is-#{$name}
				color: $color-invert
				background: $color

	.snackbar
		margin: 2rem
		display: inline-flex
		align-items: center
		justify-content: space-around
		animation-duration: $speed-slow
		margin: 0.5em 0
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04)
		border-radius: $snackbar-border-radius
		pointer-events: auto
		background: $snackbar-background-color
		color: $snackbar-color
		min-height: 3em
		.text
			padding: 0.5em 1em
		.action
			margin-left: auto
			padding: 0.5em
			padding-left: 0
			.button
				font-weight: $weight-semibold
				text-transform: uppercase
				background: $snackbar-background-color
				border: transparent
				color: $snackbar-color

			.button:hover
				background: darken($snackbar-background-color, 5%)

			.button:active
				background: darken($snackbar-background-color, 5%)

			@each $name, $pair in $all-colors
				$color: nth($pair, 1)
				&.is-#{$name}
					.button
						color: $color
		@include mobile
			width: 100%
			margin: 0
			border-radius: 0
		@include tablet
			min-width: 350px
			max-width: 600px
			overflow: hidden
	.notification
		max-width: 600px
	.toast,
	.snackbar,
	.notification
		// Modifiers
		&.is-top,
		&.is-bottom
			align-self: center

		&.is-top-right,
		&.is-bottom-right
			align-self: flex-end
			+mobile
				align-self: center

		&.is-top-left,
		&.is-bottom-left
			align-self: flex-start
			+mobile
				align-self: center

		&.is-toast
			opacity: 0.92
	// Modifiers
	> .notices-is-top
		width: 100%
		position: fixed
		padding: 2rem 2rem 0 2rem
		top: 0
		display: flex
		flex-direction: column
	> .notices-is-bottom
		width: 100%
		padding: 0 2rem 2rem 2rem
		position: fixed
		bottom: 0
		display: flex
		flex-direction: column-reverse
	&.has-custom-container
		position: fixed

.b-app
	width: 100%
	&.is-fullheight
		height: 100vh
		.b-app-body-content
			height: 100%
	.b-app-content
		.b-sheet
			&.is-loading
				width: 100%
	&.is-fullheight-mobile
		+mobile
			height: 100vh
	&.has-navigation-drawer
		+until-widescreen
			.b-sidebar
				height: 100%
				position: fixed
				top: 0
				left: 0
		+widescreen
			.b-app-body-content
				display: flex
				flex-direction: row
				.b-sidebar
					flex-grow: 0
					flex-shrink: 0
				.b-app-content
					flex-grow: 1
				.b-sheet
					&.is-loading
						flex-grow: 1
	&.has-header
		display: flex
		flex-direction: column
		.b-app-body-content
			flex: 1
			position: relative
	

