@require '~styles/variables'
@require '~styles-lib/mixins'

.growl
	elevate-3()
	position: relative

.growl-close
	position: absolute
	display: block
	top: 0
	right: 0
	width: 40px
	height: @width
	line-height: @height
	color: $white
	text-align: center
	z-index: 2

	&:hover
		change-bg('notice')
		theme-prop('color', 'notice-fg')

		@media $media-sm-up
			border-top-right-radius: $border-radius-large

.growl-inner
	padding: 25px 35px
	margin-top: $growl-spacing
	color: $white
	user-select: none
	// We set the border color in the different growl types.
	border-left-width: 7px
	border-left-style: solid

	@media $media-sm-up
		border-top-right-radius: $border-radius-large
		border-bottom-right-radius: $border-radius-large

.growl-content
	max-height: 200px
	overflow-y: hidden

/**
 * Clickable growl.
 */
.growl-clickable
	&:hover
		cursor: pointer

/**
 * Growl icons.
 */
.growl-icon
	float: left
	width: 45px
	height: 45px

	& > img
		display: block

.growl-has-icon .growl-content
	margin-left: 60px

/**
 * Info growl.
 */
.growl-type-info
	.growl-inner
		theme-prop('border-left-color', 'light')

/**
 * Success growl.
 */
.growl-type-success
	.growl-inner
		theme-prop('border-left-color', 'highlight')

/**
 * Error growl.
 */
.growl-type-error
	.growl-inner
		theme-prop('border-left-color', 'notice')
