.bar {
	display: flex;
}

.bar__item {
	padding: $padding;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 0 0 auto;
}

.bar__item--button {
	appearance: none;
	background: none;
	border: 0;
	font: inherit;
	color: inherit;
	text-align: center;
	min-width: 2.3em;

	&:not(:disabled) {
		cursor: pointer;

		&:focus,
		&:hover {
			background-color: rgba($color-bg, 0.2);
		}
	}
	&:disabled {
		opacity: 0.5;
	}

	@media print {
		display: none;
	}
}

.bar__item--grow {
	flex: 1 1 auto;
}

.bar__item--left {
	border-right: 1px solid $color-border;
	order: 0;
}

.bar__item--right {
	border-left: 1px solid $color-border;
	order: 100;
}