/* assets/css/themes.css */

/* Styles for the theme toggle button */
.theme-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem; /* w-10 */
    height: 2.5rem; /* h-10 */
    border-radius: 9999px; /* rounded-full */
    background-color: #f1f5f9; /* slate-100 */
    color: #475569; /* slate-600 */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dark .theme-toggle {
    background-color: #334155; /* slate-700 */
    color: #e2e8f0; /* slate-200 */
}

.theme-toggle:hover {
    background-color: #e2e8f0; /* slate-200 */
}

.dark .theme-toggle:hover {
    background-color: #475569; /* slate-600 */
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    width: 1.5rem; /* w-6 */
    height: 1.5rem; /* h-6 */
}

/* Hide sun icon in dark mode, moon in light mode */
.dark .theme-toggle .icon-sun {
    display: none;
}

html:not(.dark) .theme-toggle .icon-moon {
    display: none;
}