/* DARK MODE */
.light-switch-container{
	justify-content: center;
	flex-direction: column;
	display: flex;
	margin-left: 0.75rem;
	transition: all .3s ease;
	border-radius: 150px;
}

.light-switch{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border-width: 0;
}

.dark-toggle-switch{
	padding: 0.5rem;
	cursor: pointer;
	position: relative;
	border-radius: 50px;
	transition: all .3s ease;
}

.sun, .moon{
	display: block;
	vertical-align: middle;
	fill:var(--e-global-color-accent);
	transition: all .1s ease;
}

@media(min-width:1024px){
	.light-switch-container:hover {
		background: var(--e-global-color-146d67d)!important;
	}
	.light-switch-container[data-tooltip]:after {
		content: attr(data-tooltip);
		opacity: 0;
		visibility: hidden;
		position: absolute;
		right: 35px;
		padding: 6px 10px;
		border-radius: 50px;
        color:#fff;
		background-color: #c8102f2d;
		-webkit-backdrop-filter: blur(3px);
		backdrop-filter: blur(3px);
		color: var(--e-global-color-secondary);
		font-size: 13px;
		max-width: 300px;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		transition: all .3s ease;
	}
	.light-switch-container[data-tooltip]:hover:after {
		visibility: visible;
		opacity: 1;
	}
	.light-switch-container .dark-toggle-switch:hover {
		background: var(--e-global-color-146d67d);
	}
	.light-switch-container .dark-toggle-switch:hover .sun, .light-switch-container .dark-toggle-switch:hover .moon {
		fill: var(--e-global-color-primary);
	}
}

html.is-light .moon, html:not(.is-light) .sun{
	display:none;
}