.save-bar {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	display: flex;
	position: fixed;
	z-index: 2;
	pointer-events: none;
	justify-content: space-between;
	flex: 1 0 100%;
	width: 100%;
	height: rem(48);
	background-color: $c-white;
	border-bottom: 1px solid $c-border;
	color: $c-text;
	opacity: 0;
	transition: all 300ms ease-out;
	left: 0;
	top: 0;
}
.save-bar--visible {
	pointer-events: auto;
}
.save-bar__left,
.save-bar__right {
	display: inline-flex;
	align-items: center;
}
.save-bar__left {
	border-right: 1px solid $c-border-light;
	display: none;
	flex: 1 1 auto;
	max-width: rem(240);
	padding-left: spacing('base');
	padding-right: spacing('base');
	overflow: hidden;
}

.save-bar__right {
	flex: 1 0 auto;
	justify-content: flex-end;
	padding-right: spacing('base');

	.btn + .btn {
		margin-left: spacing('tight');
	}
}

.save-bar__lockup {
	display: flex;
	align-items: center;
}

.save-bar__title {
	@include type-style-h3;
	margin-left: spacing('base');
	margin-right: auto;
}

.save-bar__text {
	@include typescale('ui');
	font-weight: $font-weight-bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	a {
		color: inherit;
		text-decoration: none;
	}
}
.save-bar-enter-done {
	opacity: 1;
}
.save-bar-exit-done {
	opacity: 0;
}
@include gt('small') {
	.save-bar__left {
		display: inline-flex;
	}
}