.navigation__toggle .toggle__switch{
	    position: relative;
	    height: 26px;
	    width: 47px;
	cursor:pointer;
}
.navigation__toggle .toggle__switch svg{
	position:absolute;
	transition:0.3s ease;
}

.navigation__toggle .toggle__switch .switch_off{
	opacity:0
}

.darkmode .navigation__toggle .toggle__switch .switch_off{
	opacity:1;
    transform: translate3d(21px, 0, 0);
}
.darkmode .navigation__toggle .toggle__switch .switch_on{
	opacity:0;
    transform: translate3d(21px, 0, 0);
}

 :root.darkmode {
    --primary-background-to-dark-100: #121212;
    --primary-background-to-dark-400: #282828;
    --secondary-background-to-dark-400: #363636;
    --secondary-background-to-dark-100: #121212;
    --primary-400-to-dark-300: #282828;
    --primary-400-to-dark-500: #1a5f56;
    --primary-400-to-light-100: #929292;
    --primary-400-to-light-200: #414141;
    --primary-500-to-dark-100: #fff;
    --primary-500-to-dark-200: #004d43;
    --primary-500-to-dark-300: #004d43;
    --primary-600-to-dark-200: #00332d;
    --primary-600-to-dark-400: #00332d;
    --custom-100-to-dark-100: #121212;
    --custom-100-to-white: #fff;
    --custom-200-to-dark-200: #1f1f1f;
    --custom-200-to-dark-400: #282828;
    --custom-200-to-white: #fff;
    --custom-200-to-light-white: #48504f;
    --custom-300-to-white: #fff;
    --custom-400-to-dark-400: #282828;
    --custom-500-to-dark-100: #121212;
    --custom-600-to-dark-400: #282828;
    --custom-700-to-dark-500: #363636;
    --custom-800-to-dark-200: #1f1f1f;
    --custom-200: #004f51;
	--white-to-dark-100: #121212;
    --white-to-dark-200: #fff;
    --white-to-dark-300: #202020;
    --white-to-dark-400: #282828;
    --gray-100-to-dark-300: #f8fcfb;
    --gray-200-to-dark-300: #f0f5f4;
    --gray-200-to-dark-400: #f0f5f4;
    --gray-300-to-dark-200: #cbd5e1;
    --gray-900-to-white: #fff;
    --white-to-white: #fff;
    --dark-to-white: #fff;
    --accent-400: #fbe122;
}