#toolbar {
	display: flex;
	height: 100%;
	padding: 0 1rem;
}

#toolbar.warning:after {
	content: 'Selected data cannot be used to create a chart.';
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	color: var(--smart-error);
}

#toolbar > div {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	margin-right: 15px;
	width: 35px;
	height: 30px;
	height: 100%;
	font-size: 12px;
	background-size: contain;
	background-repeat: no-repeat;
	user-select: none;
	cursor: pointer;
}

	#toolbar > div:hover {
		background-color: var(--smart-grid-column-header-background-hover);
	}

	#toolbar > div:active {
		background-color: var(--smart-grid-column-header-background-active);
	}

	#toolbar > div.warning {
		outline: 2px solid var(--smart-error);
	}

#column {
background-image: url("../../jqwidgets/styles/images/create-column.png");
}

#line {
background-image: url("../../jqwidgets/styles/images/create-line.png");
}

#pie {
background-image: url("../../jqwidgets/styles/images/create-pie.png");
}

#bar {
background-image: url("../../jqwidgets/styles/images/create-bar.png");
}

#area {
background-image: url("../../jqwidgets/styles/images/create-area.png");
}

#scatter {
background-image: url("../../jqwidgets/styles/images/create-scatter.png");
}

[theme="dark"] #column {
background-image: url("../../jqwidgets/styles/images/create-column-dark.png");
}

[theme="dark"] #line {
background-image: url("../../jqwidgets/styles/images/create-line-dark.png");
}

[theme="dark"] #pie {
background-image: url("../../jqwidgets/styles/images/create-pie-dark.png");
}

[theme="dark"] #bar {
background-image: url("../../jqwidgets/styles/images/create-bar-dark.png");
}

[theme="dark"] #area {
background-image: url("../../jqwidgets/styles/images/create-area-dark.png");
}

[theme="dark"] #scatter {
background-image: url("../../jqwidgets/styles/images/create-scatter-dark.png");
}