/*
		static/css/events.css
		=====================

		MH, 07.25, 08.25
*/

.state-upcoming::before {
	content: var(--content) !important;
}:root {
	--content: '\f251';
	--color-state-pending: #2a5880;
	--color-state-upcoming: #c26a00;
	--color-state-running: #026f02;
	--color-state-ended: #910000;
}

.state-pending::before {
	color: var(--color-state-pending);
	content: '\f251';
}

.state-pending:has(+.state-upcoming)::before {
	color: var(--color-state-upcoming);
}

.state-upcoming::before {
	color: var(--color-state-upcoming);
	content: '\f251';
}

.state-running::before {
	color: var(--color-state-running);
	content: '\f252';
}

.state-ended::before {
	color: var(--color-state-ended);
	content: '\f253';
}

		i:has(+i[class*=state-upcoming])::before {
	content: '\f250';
}

		

	.state-pending::before,
.state-upcoming::before,
.state-running::before,
.state-ended::before {
	font-family: "fontello";
	font-style: normal;
	font-weight: normal;
	display: inline-block;
	text-decoration: inherit;
	width: 1em;
	margin-right: .25em;
	text-align: center;
	font-variant: normal;
	text-transform: none;
	font-size: 13px;
	vertical-align: 1px;
}

.submenu {

	& .state-pending::before,
	& .state-upcoming::before,
	& .state-running::before,
	& .state-ended::before {
    	font-size: .85em;
	}
}

i ~ i {
	position: absolute;
}

i {
	left: 0;
} 

.state-pending:has(~i) {
	visibility: hidden;
}

.state-pending:has(~.state-upcoming) {

	visibility: visible;
}


	.state-upcoming,
body:has(.menu>li:nth-of-type(4):hover) .state-upcoming  {
	animation: upcoming 2s running infinite cubic-bezier(0,1,0,1);
}

.sidebar:not(:hover) .state-upcoming {
	animation: none;
}

 .sidebar:not(:hover) ~ main .state-upcoming {
	animation: none;
 }

 .news-item-container:not(.upcoming-events) .state-upcoming {
	animation: none;
 }

.state-upcoming {
	&:hover,
	&:has(+time:hover) {
		animation: upcoming 2s running infinite cubic-bezier(0,1,0,1) !important;
	}
}

@keyframes upcoming {

	0% { --content: '\f251' }
	50% { --content: '\f250' }
}