.theme-switcher{
	position: fixed;
	bottom: 2rem;
	left: 2rem;
	z-index: 9999;
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-end;
	border-radius: 1.75rem;
	box-shadow: $box-shadow;
	background: $white;
	min-width: 3.5rem;
	min-height: 3.5rem;
	transition: border-radius .3s ease .7s;
	.open_switcher{
		background: $white;
		color: $dark;
		width: 3.5rem;
		height: 3.5rem;
		border-radius: 1.75rem;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		overflow: hidden;
		opacity: 1;
		transition: opacity .3s ease 1s, width 0s ease 1s, height 0s ease 1s;
	}
	.theme-menu-wrapper{
		max-height: 0;
		max-width: 0;
		overflow: hidden;
		transition: opacity .3s ease 0s, max-width .7s ease .3s, max-height .7s ease .3s;
		opacity: 0;
		ul{
			margin-bottom: 0;
			padding: 0;
			li{
				a{
					color: $dark;
					padding: .5rem 1rem;
					display: block;
					text-decoration: unset;
					&.active {
						font-weight:bold;
					}
				}
				&:not(:last-child){
					border-bottom: 1px solid $gray-200;
				}
			}
		}
	}
	&:hover{
		border-radius: .5rem;
		transition: border-radius .3s ease;
		.theme-menu-wrapper{
			max-height: 30rem;
			max-width: 30rem;
			opacity: 1;
			transition: opacity .5s ease .3s, max-width .7s ease, max-height .7s ease;
		}
		.open_switcher{
			width: 0;
			height: 0;
			opacity: 0;
			transition: opacity .5s ease, width 0s ease, height 0s ease;
		}
	}

}