/*****.iconic*****/

.icon  {  display:inline-block;  }
.icon16 { width:16px; height:16px; }
.icon32 { width:32px; height:32px; }
.icon64 { width:64px; height:64px; }


/************** button **********.iconic*****/

.button .made{
    border-radius: var(--border-corner-button);
    border: 1px solid gray;
    box-sizing: border-box;
	height-min: var(--inline-height);
	display:inline-block;
    background-color: var(--color-btnface);
    color: var(--color-btntext);
	text-align: center;
	cursor: pointer;
	user-select: none;  
	white-space: nowrap;
	pointer-events: all !important;
}

.button .made .icon{
    pointer-events: none;
    margin:.3em .3em;
    vertical-align: middle;
}

.button .made .caption{
    margin-right:.4em;
    vertical-align: middle;
}

.button .made:active {
	background-color: rgb(246, 97, 81);
}

.button .made:hover {
	background-color:var(--color-hover);
}

.button .made .caption:empty   {
	display: none;
}

.button .made:has(.caption:empty) { 
	width: var(--inline-height);	
	vertical-align: bottom;
}

.button.vi_big .made{
	height: 32px;
}

.button.vi_big .made:has(.caption:empty) { 
	width: 32px;
	}

.button.vi_big .made .icon{ scale: 1.5; margin-left: .3em; margin-top: .5em;}
.button.vi_big .made .caption{ font-size:1.4em;}
 
 

.toolbar {
	width: -webkit-fill-available;
	background-color: var(--color-btnface);
	margin-bottom:2px;
	zvertical-align: bottom;
	border-radius: var(--border-corner-button);
    border: 1px solid gray;
	display: inline-block;
	box-sizing: border-box;
	font-size: 1em;
	padding: .2em;
} 


.toolbar:has(.list:empty) { display: none; }

 
.toolbar .list .component{
	margin: 0px 1px;
	vertical-align: middle;
}

.toolbar .made .label { display: none;}
.toolbar .made .button .caption { display: none;}
	
 .toolbar .list .seperator {
 	height:1.8em; width:1px;	
 	background-color:black;
	vertical-align: middle;
}