/**
 * FLAWORKS Theme Engine - Global Theme Transition & Toggle Styling
 */

/* Smooth Theme Switching Transitions */
html, body {
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                color 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Theme Toggle Button Base Styling */
.theme-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    border-radius: 50%;
    position: relative;
    user-select: none;
}

.theme-toggle svg {
    width: 20px;
    height: 20px;
    display: block;
    margin: auto;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-toggle:hover svg {
    transform: rotate(15deg) scale(1.08);
}

/* ==========================================================================
   THEME ICON DISPLAY RULES:
   - Light Mode: Shows SUN icon (Gambar Kedua), Hides MOON icon
   - Dark Mode:  Shows MOON icon (Gambar Pertama), Hides SUN icon
   ========================================================================== */

/* 1. Light Mode State (Matahari / Sun Icon) */
[data-theme="light"] .theme-toggle .sun-icon,
html.light-mode .theme-toggle .sun-icon {
    display: block !important;
}

[data-theme="light"] .theme-toggle .moon-icon,
html.light-mode .theme-toggle .moon-icon {
    display: none !important;
}

/* 2. Dark Mode State (Bulan / Moon Icon) */
[data-theme="dark"] .theme-toggle .sun-icon,
html.dark-mode .theme-toggle .sun-icon,
:root:not([data-theme="light"]) .theme-toggle .sun-icon {
    display: none !important;
}

[data-theme="dark"] .theme-toggle .moon-icon,
html.dark-mode .theme-toggle .moon-icon,
:root:not([data-theme="light"]) .theme-toggle .moon-icon {
    display: block !important;
}