.rrui__snackbar {
	display     : flex;
	align-items : center;

	background : var(--rrui-snackbar-background-color);
	color      : var(--rrui-snackbar-text-color);

	border-radius : var(--rrui-snackbar-border-radius);

	padding-left  : var(--rrui-snackbar-side-padding);
	padding-right : var(--rrui-snackbar-side-padding);

	min-height : var(--rrui-snackbar-height);

	position       : fixed;
	left           : 0;
	bottom         : 0;
	margin         : var(--rrui-snackbar-margin);
	z-index        : 1;
	transition     : all 225ms cubic-bezier(0, 0, 0.2, 1);
	transform      : translateY(0);
	visibility     : visible;
}

.rrui__snackbar--hidden {
	transition: all 195ms cubic-bezier(0.4, 0, 0.6, 1);
	visibility: hidden;
	pointer-events: none;
}

.rrui__snackbar__text {
	flex: auto;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

.rrui__snackbar__count {
	display          : flex;
	align-items      : center;
	justify-content  : center;
	position         : absolute;
	right            : 0;
	bottom           : 0;
	box-sizing       : border-box;
	min-width        : var(--rrui-snackbar-notifications-count-size);
	height           : var(--rrui-snackbar-notifications-count-size);
	padding-left     : 0.3em;
	padding-right    : 0.3em;
	transform        : translateX(50%) translateY(50%);
	border           : 1px solid var(--rrui-white-color);
	border-radius    : calc(var(--rrui-snackbar-notifications-count-size) / 2);
	background-color : var(--rrui-snackbar-notifications-count-background-color);
	color            : var(--rrui-white-color);
	font-weight      : lighter;
	pointer-events   : none;
}

.rrui__snackbar__actions {
	display: flex;
	align-items: center;
}

.rrui__snackbar__action {
	font-size: 95%;
	border-radius: 0.5em;
	text-transform: uppercase;
	color: var(--rrui-accent-color);
}

.rrui__snackbar__action:active {
	color: var(--rrui-accent-color-light);
}

.rrui__snackbar__action,
.rrui__snackbar__close {
	margin-left: var(--rrui-unit);
	margin-right: -0.5em;
	padding: 0.5em;
}

.rrui__snackbar__close {
	border-radius: 50%;
	color: inherit;
}

.rrui__snackbar__close:hover {
	color: var(--rrui-snackbar-close-button-color);
}

.rrui__snackbar__close:active {
	color: var(--rrui-snackbar-close-button-color-active);
}

.rrui__snackbar__close-icon {
	width: 0.75em;
	height: 0.75em;
}