/**
 * Icon-2 Style - Animated SVG Sun/Moon Morph
 */
.kp-toggle-icon-2 {
    color: #bbb;
    position: relative;
    cursor: pointer;
}

.kp-toggle-icon-2 .themeToggleInput {
    opacity: 0;
    width: 100%;
    aspect-ratio: 1;
    cursor: pointer;
}

.kp-toggle-icon-2 svg {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease;
    transform: rotate(40deg);
}

.kp-toggle-icon-2 svg .sunMoon {
    transform-origin: center center;
    transition: inherit;
    transform: scale(1);
}

.kp-toggle-icon-2 svg .sunRay {
    transform-origin: center center;
    transform: scale(0);
}

.kp-toggle-icon-2 svg mask > circle {
    transition: transform 0.64s cubic-bezier(0.41, 0.64, 0.32, 1.575);
    transform: translate(0px, 0px);
}

.kp-toggle-icon-2 svg .sunRay2 { 
    animation-delay: 0.05s !important; 
}

.kp-toggle-icon-2 svg .sunRay3 { 
    animation-delay: 0.1s !important; 
}

.kp-toggle-icon-2 svg .sunRay4 { 
    animation-delay: 0.17s !important; 
}

.kp-toggle-icon-2 svg .sunRay5 { 
    animation-delay: 0.25s !important; 
}

.kp-toggle-icon-2 svg .sunRay6 { 
    animation-delay: 0.29s !important; 
}

.kp-toggle-icon-2 .themeToggleInput:checked + svg {
    transform: rotate(90deg);
}

.kp-toggle-icon-2 .themeToggleInput:checked + svg mask > circle {
    transform: translate(16px, -3px);
}

.kp-toggle-icon-2 .themeToggleInput:checked + svg .sunMoon {
    transform: scale(0.55);
}

.kp-toggle-icon-2 .themeToggleInput:checked + svg .sunRay {
    animation: kpShowRay 0.4s ease 0s 1 forwards;
}

@keyframes kpShowRay {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}