/* fallback */
@font-face
{
	font-family: 'Material Symbols';
	font-style: normal;
	font-weight: 400;
	src: url('/assets/fonts/material-symbols-outlined.woff2') format('woff2');
}

m-icon
{
	font-family: 'Material Symbols';
	font-weight: normal;
	font-style: normal;
	font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 100, 'opsz' 48;
	font-size: 1em;
	line-height: 1.2em;
	vertical-align: middle;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: 'liga';
}

/* larger sizes */
m-icon.size-2
{
	font-size: 2em !important;
}
m-icon.size-3
{
	font-size: 3em !important;
}
m-icon.size-4
{
	font-size: 4em !important;
}
m-icon.size-5
{
	font-size: 5em !important;
}
m-icon.size-10
{
	font-size: 10em !important;
}

/* spin clockwise */
@keyframes spin-cw {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

m-icon.spin,
m-icon.spin-cw
{
	animation-name: spin-cw;
	animation-duration: 1000ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

/* spin counter clockwise */
@keyframes spin-ccw {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}

m-icon.spin-ccw
{
	animation-name: spin-ccw;
	animation-duration: 1000ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}