.button-icon
{
	display: flex;
	justify-content: space-around;
	padding: 2px;
	background-color: rgba(255, 255, 255, 0.5);
	overflow: hidden;
}

.button-icon span
{
	/* height: 28px; */
	/* height: 24px; */
	height: 18px;
}

.button-icon span.alternate div:not(.active)
{
	display: none;
}

.button-icon svg
{
	height: 18px;
}

body.update span[data-event-name="save"] svg
{
	/* fill: crimson; */
}

.button-icon svg:hover
{
	fill: darkblue;
}

.button-icon-contener:not([data-icon~="save"]) span[data-event-name="save"],
.button-icon-contener:not([data-icon~="print"]) span[data-event-name="print"],
.button-icon-contener:not([data-icon~="restore"]) span[data-event-name="restore"],
.button-icon-contener:not([data-icon~="history"]) span[data-event-name="history"],
.button-icon-contener:not([data-icon~="lock"]) span[data-event-name="lock"],
.button-icon-contener:not([data-icon~="cancel"]) span[data-event-name="cancel"],
.button-icon-contener:not([data-icon~="remove"]) span[data-event-name="remove"],
.button-icon-contener:not([data-icon~="reset-icon"]) span[data-event-name="reset-icon"]
{
	display: none;
}


/*
	Gère l'affichage de l'icône "remove" et de l'icône "reset-icon", si c'est une
	opération de création la première est masquée et si c'est une opération
	de modification la seconde est masquée
*/
body.update .button-icon-contener[data-icon~="reset-icon"] span[data-event-name="reset-icon"]
{
	display: none;
}

body:not(.update) .button-icon-contener[data-icon~="remove"] span[data-event-name="remove"],
body:not(.update) .button-icon-contener[data-icon~="history"] span[data-event-name="history"]
{
	display: none;
}

.button-icon span[data-event-name="lock"] div[data-active="open"] svg
{
	/* fill: green; */
}

.button-icon span[data-event-name="lock"] div[data-active="close"] svg
{
	fill: darkred;
}

@media screen and (max-device-width: 480px)
{
	.button-icon span
	{
		height: 20px;
	}
	
	.button-icon svg
	{
		height: 20px;
	}
}

@media print
{
	.button-icon-contener
	{
		display: none;
	}
}