.ºbutton{
	position: relative;
	display: inline-flex;
	padding: 0 var(--size-4);
	height: var(--control-height);
	align-items: center;
	justify-content: center;
	background: var(--color-button);
	border-radius: var(--control-border-radius-2);
	cursor: pointer;
	transition: 
		box-shadow .5s,
		background-color .3s ease-in;
}
	.ºbutton > *,
	.ºbutton:before{
		color: var(--color-12);
	}
	.ºbutton .icon,
	.ºbutton.icon:before{
		display: contents;
		font-size: var(--size-3);
	}
	.ºbutton.icon.mark{
		background-color: #12ADE3 !important;
	}
	.ºbutton .label{
		padding: 0 var(--size-1);
		color: var(--color-12);
		white-space: nowrap;
	}
		.ºbutton .label:empty{
			padding: 0;
		}
	.ºbutton:hover{
		background: var(--color-button-hover);
	}
	.ºbutton:focus{
		box-shadow: 0 0 0 3px var(--control-button-border-hover);
	}

.ºbutton.disabled,
.disabled .ºbutton,
.ºbutton.no-editable,
.no-editable .ºbutton{
	pointer-events: none;
	filter: grayscale(100%);
	background: var(--control-border-color-3) !important;
	box-shadow: none;
}	
	.ºbutton.disabled > *,
	.disabled .ºbutton > *,
	.ºbutton.no-editable > *,
	.no-editable .ºbutton > *{
		color: var(--control-disable-color);
	}

.ºbutton::after{
	content: '';
	box-sizing: border-box;
	visibility: hidden;
	left: 0px; top: 0px; right: 0px;  bottom: 0px;
	background: var(--control-border-hover);
	border-radius: var(--control-border-radius-2);
	opacity: .9;
	box-shadow: inset 0 0 2px var(--color-3);
	transition:
		all .3s ease-in-out;
}
.ºbutton.animate::after{
	visibility: visible;
	position: absolute;
	left: -18px; top: -18px; right: -18px;  bottom: -18px;
	border-width: 1px;
	opacity: .1;
}
		
.ºbutton.alt{
	height: var(--control-height-2);
	background: transparent !important;
	border: 1px solid var(--color-text-3);
	transition: border-color .3s ease-in;
}
	.ºbutton.alt *{
		transition: color .3s ease-in;
	}
	.ºbutton.alt > *,
	.ºbutton.alt:before{
		color: var(--color-text-2);
	}	
	.ºbutton.alt .label{
		
		color: var(--color-text);
	}

	.ºbutton.alt .icon{
		color: var(--color-text-2);
	}

	.ºbutton.alt:hover,
	.ºbutton.alt:focus{
		border-color: var(--color-button-hover);
	}
		.ºbutton.alt:hover *,
		.ºbutton.alt:focus *,
		.ºbutton.alt:hover:before,
		.ºbutton.alt:focus:before{
			color: var(--color-button-hover);
		}
	.ºbutton.alt.animate::after{
		background: var(--control-border-color-2);
		border: 1px solid var(--color-text);
	}		

.ºbutton.dashed{
	background: transparent !important;
	border: 1px dashed var(--color-text-3);
	height: calc(var(--control-height) - 2px);
}
	.ºbutton.dashed > *{
		color: var(--color-text-2);
	}
	.ºbutton.dashed:hover{
		border-color: var(--color-button-hover);
	}
		.ºbutton.dashed:hover > *{
			color: var(--color-button-hover);
		}
	.ºbutton.dashed:focus{
		box-shadow: none;
	}
	.ºbutton.dashed:active{
		border-color: var(--color-4);
	}
		.ºbutton.dashed:active > *{
			color: var(--color-4);
		}

.ºbutton.icon{
	padding: 0;
    width: var(--control-height);
}
.ºbutton.search{
	margin-left: calc(var(--size-1) * -1);
}
	.ºbutton.search:before{
		line-height: var(--control-height)
	}

.ºbutton.round{
	width: var(--control-height-2);
	border-radius: 100%;
	padding: 0;
}
.ºbutton.round.animate::after{
	border-radius: 100%;
}