.toolbar {
	position: relative; /* required for z-index to work */
	z-index: 200; /* so we don't draw over the toolbar */
	
	display: flex;
	justify-content: center;
	padding: 4px;
	background: #d0d0d0;
	border-top:    1px outset white;
	border-left:   1px outset white;
	border-bottom: 2px outset black;
	border-right:  2px outset black;
	
	width: 178px;
}

.toolbar .tools {
	display: grid;
	grid-template-columns: 26px 26px;
	width: 52px;
}

.toolbar .options {
	margin: 4px;
	border: 1px inset white;
	width: 63px;
}

.toolbar .palette {
	width: 50px;
	height: 50px;
	background: #e8e8e8;
	border-top:    1px inset black;
	border-left:   1px inset black;
	border-bottom: 1px inset white;
	border-right:  1px inset white;
	position: relative;
}

.toolbar .palette input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
	padding: 0;
	opacity: 0;
	cursor: pointer;
}

.toolbar .palette .color-preview {
	padding: 0;
	margin: 7px;
	width: calc(100% - 14px - 4px);
	height: calc(100% - 14px - 4px);
	border: 2px inset white;
	background-color: var(--draw-color);
}

button.tool {
	padding: 0;
	height: 26px;
	width: 26px;
	background: #d0d0d0;
	border-top:    1px outset white;
	border-left:   1px outset white;
	border-bottom: 1px outset black;
	border-right:  1px outset black;
}

button.tool:not(.selected):hover {
	background: #e8e8e8;
	cursor: pointer;
}

button.tool.selected {
	background: #e8e8e8;
	border-top:    1px inset black;
	border-left:   1px inset black;
	border-bottom: 1px inset white;
	border-right:  1px inset white;
}

.options > * {
	visibility: hidden;
}

.toolbar:has(.tools #brush-button.selected) .options .brushes {
	visibility: visible;
}

.brushes {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: 21px 21px 21px;
}

button.brush {
	margin: 2px;
	padding: 0;
	height: 17px;
	width: 17px;
	background: none;
	border: none;
	
	display: flex;
	justify-content: center;
	align-items: center;
}

button.brush:not(.selected):hover {
	cursor: pointer;
}

button.brush.selected {
	background: #a0a0a0;
}