.UI_Button{ /* Any screen dimension */
	font-weight:   bold;
	border-style:  solid;
	border-radius: 5px;
	cursor:pointer;
	/* -- 
	 * state : normal 
	 * -- */
	background:       var(--color--white-0);
	color:            var(--color--red-0);
	border-color:     var(--color--red-0);
	&.icon-is-colorizable > .UI_Icon{
		img{
			filter:var(--filter--red-0);
		}
	}
	/* -- 
	 * state : hover 
	 * -- */
	&:hover{
		background:       var(--color--red-0);
		color:            var(--color--white-0);
		border-color:     var(--color--white-0);
	}
	&.icon-is-colorizable:hover{
		> .UI_Icon{
			img{
				filter:var(--filter--white-0);
			}
		}
	}
	/* -- 
	 * shadow
	 * -- */
	/* SEE https://codepen.io/thomasrosen/pen/GjJGMN */
	/*box-shadow: 
		var(--UI__BUTTON__shadow-x, 0) 
		var(--UI__BUTTON__shadow-y, 0) 
		var(--UI__BUTTON__shadow-blur, 0) 
		var(--UI__BUTTON__shadow-scale, 0) 
		var(--UI__BUTTON__shadow-color, transparent); */
}
.UI_Button{
	.UI_Text,
	.UI_I18n{
		white-space: nowrap;
	}
}
.UI_Button{ /* Custom screen dimension */
	padding:      5px;
	font-size:    15px;
	border-width: 2px;
}

.UI_Button.switchtolanguage{
	/* -- 
	 * state : normal 
	 * -- */
	background:       var(--color--white-0);
	color:            var(--color--black-0);
	border-color:     var(--color--white-0);
	/* -- 
	 * state : hover 
	 * -- */
	&:hover{
		background:       var(--color--white-0);
		color:            var(--color--green-0);
		border-color:     var(--color--green-0);
	}
}
.UI_Button.marker{
	padding:0;
	.UI_Icon{
		height:48px;
		width:32px;
	}
	border:0;
}