.toolbar.section {
	position: relative;
	padding: 0px!important;
	margin:5px 0px 10px 0px;
	bottom:unset!important;
	/* gap:0px!important; */
	z-index:2;
}
.toolbar {
	position: absolute;
	padding: 5px 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	gap: 5px;
 	background: light-dark(var(--color-light-bg), var(--color-dark-grey));
	z-index:2;
	gap: 5px;
}

.toolbar.horiz {
	padding: 2px;
	bottom: 15px;
	left: 50%;
	transform: translateX(-50%);
	border-radius: var(--radius-big);
	z-index:2;
	opacity: 1;
	/* gap: 5px; */
    transition: opacity 0.4s ease;
}
.toolbar.horiz .tool {
	width: 50px;

}
.toolbar.horiz .tool.spacer {
	width: 2px;
	height:calc(var(--button-height) - 10px);
	margin:5px;
}
.toolbar.horiz.fade {
    opacity: 0;
    pointer-events: none; 
}

.toolbar.vert {
	position:relative;
	flex-direction: column;
	justify-content: flex-start;
	padding: 5px;
	right: 0px;
	border-radius: unset;
	border-left:2px solid light-dark(var(--color-light-white), var(--color-mid-grey));
	z-index:2;
	top:0;
	bottom:0px;
	padding-top:5px;
	padding-bottom:17px;
	gap:5px;

}
.toolbar.vert > button {
	border-radius: var(--radius-big);
}
.toolbar.stretch{
	position:relative;
	width:100%;
}
.tool.spacer {
	cursor: default;
	/* width:10px; */
	height:2px;
	width:calc(var(--button-width) - 10px);
	pointer-events: none;
	background-color: light-dark(var(--color-light-white), var(--color-mid-grey));
}
.tool-set{
	display: flex;
	gap: 1px;
	border-radius: var(--radius-big);
	overflow: hidden;
}
.tool-set.vert{
	flex-direction: column;
}
.tool.spacer.bottom {
	margin-top:auto;
	background-color: unset;
}

.tool {
	position: relative;
	width: var(--button-width);
	height: var(--button-height);
	justify-content: center;
	align-items: center;
	display:grid;
	cursor: pointer;
	color: light-dark(var(--color-light-grey), var(--color-light-grey));
	background-color: light-dark(var(--color-light-bg), var(--color-dark-grey));
	border-radius: unset;
}
.tool[data-count]:not([data-count="0"]):not([data-count=""])::after {
	content: attr(data-count);
	position: absolute;
	top: 20px;
	right: 1px;
	min-width: 18px;
	height: 18px;
	padding: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 600;
	color: var(--color-light-bg);
	background: light-dark(var(--color-blue), var(--color-blue));
	outline: 1px solid;
	border-radius: 50%;
}
.tool:active {
	color: light-dark(var(--color-dark-grey), var(--color-light-bg));
	background-color: light-dark(var(--color-light-white), var(--color-mid-grey));
}
@media (hover: hover) and (pointer: fine) {
.tool:hover {
	color: light-dark(var(--color-dark-grey), var(--color-light-bg));
	background-color: light-dark(var(--color-light-white), var(--color-mid-grey));
  }
}
.tool.selected {
	color: light-dark(var(--color-dark-grey), var(--color-light-bg));
	background-color: light-dark(var(--color-light-white), var(--color-mid-grey));
}
.tool.red:active, .tool.red.selected {
	color: light-dark(var(--color-light-bg), var(--color-light-bg));
	background-color: var(--color-red);
}
/* @media (hover: hover) and (pointer: fine) { */
/* .tool.red:hover,  */
.tool.red.selected {
	color: light-dark(var(--color-light-bg), var(--color-light-bg));
	background-color: var(--color-red);
  }
/* } */
button[data-ui="toggle"] {
    position: relative;
}
button[aria-pressed="true"] {
    color: light-dark(var(--color-dark-grey), var(--color-light-bg));
}
button[data-ui="toggle"][aria-pressed="true"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transform: translate(-50%, -50%) rotate(-45deg);
    opacity: 1;
}

.tool-spacer-vert{
	margin:5px;
	width:30px;
	height:2px;
	background-color: light-dark(var(--color-light-white), var(--color-mid-grey));
}
.tool-spacer-horiz{
	margin:5px;
	width:2px;
	height:30px;
	background-color: light-dark(var(--color-light-white), var(--color-mid-grey));
}

/* color pallet */
.popover {
	position: fixed;
	height:fit-content;
	width:fit-content;
	display: flex;
	align-items: center;
	justify-content: center;
    background: light-dark(var(--color-light-bg), var(--color-dark-grey));
	gap: 5px 10px;
	align-items: center;
	padding: 5px 5px;
	border-radius: var(--radius-big);
	box-shadow: var(--shadows);
	z-index: 11;
}
.popover > button {
	border-radius: var(--radius-big);
}
.pallet {
	display: unset;
	width:140px; 
}
.colorpot {
	display: inline-block;
	padding: 10px;
		margin:5px;
	width: 30px;
	height: 30px;
	border-radius: 10px;
	cursor: pointer;
}
.selectedcolorpot, .colorpot:active {
	outline: 2px solid light-dark(var(--color-light-grey), var(--color-light-grey));
	outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .selectedcolorpot, .colorpot:hover {
	outline: 2px solid light-dark(var(--color-light-grey), var(--color-light-grey));
	outline-offset: 3px;
  }
}