/* ToggleButton*/

:root {
    --px-color-bodybg: rgb(235, 240, 250);
    --px-shadow-app: inset 5px 5px 3px 0px rgba(210, 220, 240, 1), inset -5px -5px 3px 0px rgba(255, 255, 255, 1);
    --px-color-skyday: linear-gradient( 0deg, rgb(0, 162, 213) 0%, rgb(0, 224, 255) 100%);
    --px-color-skynight: linear-gradient( 0deg, rgb(0, 20, 70) 0%, rgb(0, 70, 150) 100%);
    --px-color-btnbg: rgb(255, 246, 193);
    --px-color-btnbg-active: rgb(245, 245, 245);
    --px-shadow-btn: inset 1px 1px 1px 0px rgba(255, 255, 255, 1), inset -1px -1px 1px 0px rgba(0, 0, 0, 0.3);
    --px-skyswitch-width: 120px;
    --px-skyswitch-height: 60px;
}

.toggleMode {
    z-index: 100;
    position: fixed;
    background-color: none;
    border-radius: 50px;
}

.px-app,
.px-app *,
.px-app *::before,
.px-app *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: 0;
    --px-skyswitch-gap: calc(var(--px-skyswitch-height) / 10);
}

.px-app {
    position: relative;
    width: calc(var(--px-skyswitch-width) + (var(--px-skyswitch-gap)) * 4);
    height: calc(var(--px-skyswitch-height) + (var(--px-skyswitch-gap)) * 4);
    padding: calc(var(--px-skyswitch-gap) * 2);
    border-radius: calc( (var(--px-skyswitch-height) + (var(--px-skyswitch-gap) * 4) / 2));
    box-shadow: var(--px-shadow-app);
    scale: 0.3;
}

.px-skyswitch {
    position: relative;
    width: var(--px-skyswitch-width);
    height: var(--px-skyswitch-height);
}

.px-skyswitch>input[type="checkbox"] {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}

.px-skyswitch>.px-skyswitch-sky {
    position: relative;
    width: 100%;
    height: 100%;
    padding: var(--px-skyswitch-gap);
    border-radius: calc(var(--px-skyswitch-height) / 2);
    pointer-events: none;
    overflow: hidden;
}

.px-skyswitch>.px-skyswitch-sky>.px-skyswitch-day {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: var(--px-color-skyday);
    opacity: 1;
    transition: opacity 300ms ease-in-out;
}

.px-skyswitch>input[type="checkbox"]:checked~.px-skyswitch-sky>.px-skyswitch-day {
    opacity: 0;
}

.px-skyswitch>.px-skyswitch-sky>.px-skyswitch-day>div {
    position: absolute;
    width: calc(var(--px-skyswitch-height) / 2);
    height: calc(var(--px-skyswitch-height) / 2);
    transition: top 500ms cubic-bezier(0.36, 1.02, 0.52, 1.45);
}

.px-skyswitch>.px-skyswitch-sky>.px-skyswitch-day>div:nth-child(1) {
    left: 50%;
    top: 45%;
    font-size: calc(var(--px-skyswitch-width) / 4);
    color: rgba(255, 255, 255, 0.7);
    transition-delay: 150ms;
}

.px-skyswitch>input[type="checkbox"]:checked~.px-skyswitch-sky>.px-skyswitch-day>div:nth-child(1) {
    top: 100%;
}

.px-skyswitch>.px-skyswitch-sky>.px-skyswitch-day>div:nth-child(2) {
    left: 40%;
    top: 10%;
    font-size: calc(var(--px-skyswitch-width) / 5);
    color: rgba(255, 255, 255, 0.5);
    transition-delay: 200ms;
}

.px-skyswitch>input[type="checkbox"]:checked~.px-skyswitch-sky>.px-skyswitch-day>div:nth-child(2) {
    top: 100%;
}

.px-skyswitch>.px-skyswitch-sky>.px-skyswitch-day>div:nth-child(3) {
    left: 75%;
    top: 20%;
    font-size: calc(var(--px-skyswitch-width) / 6);
    color: rgba(255, 255, 255, 0.3);
    transition-delay: 100ms;
}

.px-skyswitch>input[type="checkbox"]:checked~.px-skyswitch-sky>.px-skyswitch-day>div:nth-child(3) {
    top: 100%;
}

.px-skyswitch>.px-skyswitch-sky>.px-skyswitch-night {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: var(--px-color-skynight);
    opacity: 0;
    transition: opacity 300ms ease-in-out;
}

.px-skyswitch>input[type="checkbox"]:checked~.px-skyswitch-sky>.px-skyswitch-night {
    opacity: 1;
}

.px-skyswitch>.px-skyswitch-sky>.px-skyswitch-night>div {
    position: absolute;
    width: calc(var(--px-skyswitch-height) / 2);
    height: calc(var(--px-skyswitch-height) / 2);
    transition: top 500ms cubic-bezier(0.36, 1.02, 0.52, 1.45);
}

.px-skyswitch>.px-skyswitch-sky>.px-skyswitch-night>div:nth-child(1) {
    left: 40%;
    top: 100%;
    font-size: calc(var(--px-skyswitch-width) / 10);
    color: rgba(255, 255, 255, 0.8);
    transition-delay: 100ms;
}

.px-skyswitch>input[type="checkbox"]:checked~.px-skyswitch-sky>.px-skyswitch-night>div:nth-child(1) {
    top: 20%;
}

.px-skyswitch>.px-skyswitch-sky>.px-skyswitch-night>div:nth-child(2) {
    left: 10%;
    top: 100%;
    font-size: calc(var(--px-skyswitch-width) / 9);
    color: rgba(255, 255, 255, 0.75);
    transition-delay: 200ms;
}

.px-skyswitch>input[type="checkbox"]:checked~.px-skyswitch-sky>.px-skyswitch-night>div:nth-child(2) {
    top: 30%;
}

.px-skyswitch>.px-skyswitch-sky>.px-skyswitch-night>div:nth-child(3) {
    left: 25%;
    top: 100%;
    font-size: calc(var(--px-skyswitch-width) / 8);
    color: rgba(255, 255, 255, 0.7);
    transition-delay: 150ms;
}

.px-skyswitch>input[type="checkbox"]:checked~.px-skyswitch-sky>.px-skyswitch-night>div:nth-child(3) {
    top: 50%;
}

.px-skyswitch>.px-skyswitch-sky>.px-skyswitch-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.px-skyswitch>.px-skyswitch-sky>.px-skyswitch-track>.px-skyswitch-btn {
    position: absolute;
    width: calc(var(--px-skyswitch-height) - (var(--px-skyswitch-gap) * 2));
    height: calc(var(--px-skyswitch-height) - (var(--px-skyswitch-gap) * 2));
    left: 0;
    top: 0;
    border-radius: 50%;
    background-color: var(--px-color-btnbg);
    box-shadow: var(--px-shadow-btn);
    transition: left 300ms ease-in-out, background-color 300ms ease-in-out;
}

.px-skyswitch>input[type="checkbox"]:checked~.px-skyswitch-sky>.px-skyswitch-track>.px-skyswitch-btn {
    left: calc( 100% - (var(--px-skyswitch-height) - (var(--px-skyswitch-gap) * 2)));
    background-color: var(--px-color-btnbg-active);
}