.toolbar {
	position: relative;
	z-index: 10;
	display: flex;
	overflow: hidden;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	contain: content;
	padding: 4px;
	min-height: 56px;

	[borderless] {
		border: none !important;
	}

	.toolbar-background {
		left: 0;
		top: 0;
		position: absolute;
		z-index: -1;
		width: 100%;
		height: 100%;
		border: 0;
		transform: translateZ(0);
		pointer-events: none;
		contain: strict;

		border-style: solid;
		border-color: var(--toolbar-border-color, rgba(0, 0, 0, .2));
		background-color: var(--toolbar-background, #ffffff);

		.app.dark & {
			border-color: var(--toolbar-dark-border-color, rgba(255, 255, 255, .2));
			background-color: var(--toolba-dark-background, #080808);
		}

		.app.clear & {
			background-color: transparent;
		}
	}

	&.bottom:first-child .toolbar-background{
		border-width: .55px 0 0;
	}

	&:last-child .toolbar-background {
		border-width: 0 0 .55px;
	}

	.toolbar-inner {
		flex: 1;
		display: flex;
		align-items: center;
	}
}

.title {
	display: flex;
	flex: 1;
	align-items: center;
	transform: translateZ(0);
	left: 0;
	top: 0;
	padding: 0 0.8rem 1px;
	width: 100%;
	height: 100%;
	transform: translateZ(0);
	pointer-events: none;

	.title-inner {
		display: block;
		overflow: hidden;
		width: 100%;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 1rem;
		font-weight: 600;
		color: #000;
		pointer-events: auto;

		.app.dark & {
			color: #FFF;
		}
	}
}

.toolbar-item{
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0px 0.3rem;

	[class^="icon-"] {
		width: 1em;
		height: 1em;
		line-height: 1em;
		font-size: 1.5rem;

		.app.dark & {
			color: var(--color-primary, #FFF);
		}
	}
}