/**
 * Modern Style - Sun/Moon Ball with Stars
 */
.kp-toggle-modern {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.kp-toggle-modern .modern-input {
    position: absolute;
    left: -99em;
}

.kp-toggle-modern .modern-toggle {
    cursor: pointer;
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #83d8ff;
    border-radius: 84px;
    transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.kp-toggle-modern .modern-toggle__handler {
    display: inline-block;
    position: relative;
    z-index: 1;
    background-color: #ffcf96;
    border-radius: 50px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform: rotate(-45deg);
}

.kp-toggle-modern .modern-toggle__handler .crater {
    position: absolute;
    background-color: #e8cda5;
    opacity: 0;
    transition: opacity 200ms ease-in-out;
    border-radius: 100%;
}

.kp-toggle-modern .star {
    position: absolute;
    background-color: #fff;
    transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
    border-radius: 50%;
}

.kp-toggle-modern .star--4,
.kp-toggle-modern .star--5,
.kp-toggle-modern .star--6 {
    opacity: 0;
    transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.kp-toggle-modern .modern-input:checked + .modern-toggle {
    background-color: #749dd6;
}

.kp-toggle-modern .modern-input:checked + .modern-toggle .modern-toggle__handler {
    background-color: #ffe5b5;
    transform: translateX(var(--modern-translate-x)) rotate(0);
}

.kp-toggle-modern .modern-input:checked + .modern-toggle .modern-toggle__handler .crater {
    opacity: 1;
}

.kp-toggle-modern .modern-input:checked + .modern-toggle .star--4,
.kp-toggle-modern .modern-input:checked + .modern-toggle .star--5,
.kp-toggle-modern .modern-input:checked + .modern-toggle .star--6 {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.kp-toggle-modern .modern-input:checked + .modern-toggle .star--4 {
    transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.kp-toggle-modern .modern-input:checked + .modern-toggle .star--5 {
    transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.kp-toggle-modern .modern-input:checked + .modern-toggle .star--6 {
    transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}