.hn-colorschemeswitch {
    /* --hn-colorschemeswitch-font-light-color: #191919; */
    --hn-colorschemeswitch-font-light-color: #404045;
    /* --hn-colorschemeswitch-bg-light-color: #909090; */
    --hn-colorschemeswitch-bg-light-color: rgba(221, 221, 221, 0.8);

    /* --hn-colorschemeswitch-font-dark-color: #909090; */
    --hn-colorschemeswitch-font-dark-color: #aaaaa5;
    /* --hn-colorschemeswitch-bg-dark-color: #191919; */
    --hn-colorschemeswitch-bg-dark-color: rgba(25, 25, 25, .8);

    --hn-colorschemeswitch-border-radius: 3px;
}

body[data-hn-colscheme] {
	transition: background-color .3s ease-in-out !important;
}

.hn-colorschemeswitch[data-type='checkbox'] {
    position: fixed;
    top:300px;
    z-index:+99999;
}
.hn-colorschemeswitch[data-type='checkbox'][data-position*="right"] {
    right:0;
}
.hn-colorschemeswitch[data-type='checkbox'][data-position*="left"] {
    left:0;
}

.hn-colorschemeswitch[data-type='checkbox'] input[type="checkbox"] {
    display:none;
}

.hn-colorschemeswitch[data-type='checkbox'] .hn-colorschemeswitch--icon {
    background-color: var(--hn-colorschemeswitch-bg-light-color);
    color: var(--hn-colorschemeswitch-font-light-color);
    width: 32px;
    height:32px;
    font-family:"Font Awesome 5 Free";
    font-weight: 900;
    font-size: 24px;
    padding: .25em;
    cursor: pointer;
    opacity:1;
    transition: opacity .3s ease-in-out;
}

.hn-colorschemeswitch[data-type='checkbox'][data-position*="right"] .hn-colorschemeswitch--icon {
    border-top-left-radius: var(--hn-colorschemeswitch-border-radius);
    border-bottom-left-radius: var(--hn-colorschemeswitch-border-radius);
}
.hn-colorschemeswitch[data-type='checkbox'][data-position*="left"] .hn-colorschemeswitch--icon {
    border-top-right-radius: var(--hn-colorschemeswitch-border-radius);
    border-bottom-right-radius: var(--hn-colorschemeswitch-border-radius);
}



.hn-colorschemeswitch[data-type='checkbox'] .hn-colorschemeswitch--icon:hover {
    opacity:.8;
}
.hn-colorschemeswitch[data-type='checkbox'] .hn-colorschemeswitch--icon:after {
    content: "\f186"; /* moon */
    content: "";
    background-image: url("moon-solid-full.svg");
    display: block;
    width:100%;
    height:100%;
}


.hn-colorschemeswitch[data-type='checkbox'] input[type="checkbox"]:checked + .hn-colorschemeswitch--icon {
    background-color: var(--hn-colorschemeswitch-bg-dark-color);
    color: var(--hn-colorschemeswitch-font-dark-color);
}

.hn-colorschemeswitch[data-type='checkbox'] input[type="checkbox"]:checked + .hn-colorschemeswitch--icon:after {
    content: "\f185"; /*sun */
    content: "";
    background-image: url("sun-solid-full.svg");
    display: block;

    filter: invert(.8) sepia(0) saturate(5) hue-rotate(0deg);
}



/**
 * helper classes
 */

/* hide content depending on light/dark mode, except in edit modes */
body:not(.elementor-editor-active)[data-hn-colscheme="dark"] .lightmode-only {
	display:none !important;
}

body:not(.elementor-editor-active)[data-hn-colscheme="light"] .darkmode-only {
	display:none !important;
}