@import '~shared/styles/colors';

@snackbar-margin: 20px;
@snackbar-min-width: 500px;

// wrapper for the css transition group
.root {
	bottom: -1000px;
	height: 0px;
	position: absolute;
	top: -1000px;
	width: 0px;
}

.snackbar {
	align-items: stretch;
	background: @gray-dark;
	bottom: @snackbar-margin;
	box-shadow: rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px
		18px 0px rgba(0, 0, 0, 0.12);
	display: none;
	flex-direction: row;
	left: @snackbar-margin;
	min-width: @snackbar-min-width;
	position: fixed;
	z-index: 2;

	&.open {
		display: flex;
	}

	&> :first-child {
		color: @white;
		flex: 1;
		font-size: 14px;
		line-height: 24px;
		padding: 10px 20px;
		vertical-align: middle;
	}

	button {
		background: transparent;
		border: 0px;
		cursor: pointer;
		display: flex;
		flex: 0 0 24px;
		margin: 0px;
		margin-right: 10px;
		outline: none;
		padding: 0px;

		svg {
			align-items: center;
			fill: @white;
			height: 24px;
		}
	}
}

:global {
	.slideup-enter {
		bottom: -50px;
	}

	.slideup-enter.slideup-enter-active {
		bottom: @snackbar-margin;
		transition: bottom 200ms linear;
	}

	.slideup-leave {
		bottom: @snackbar-margin;
	}

	.slideup-leave.slideup-leave-active {
		bottom: -50px;
		transition: bottom 200ms linear;
	}
}
