/*
 * Hide on theme
 */
@media (prefers-color-scheme: light) {
    :root:not(.ba-theme-light):not(.ba-theme-dark) .ba-theme-light-hidden {
        display: none !important;
    }
}
@media (prefers-color-scheme: dark) {
    :root:not(.ba-theme-light):not(.ba-theme-dark) .ba-theme-dark-hidden {
        display: none !important;
    }
}
.ba-theme-light:root .ba-theme-light-hidden,
.ba-theme-dark:root .ba-theme-dark-hidden {
    display: none !important;
}
/* TODO: [See if a solution can be found] The problem is that both '.ba-theme-light .ba-theme-dark .ba-theme-light-hidden' and '.ba-theme-dark .ba-theme-light .ba-theme-dark-hidden' selectors will render hidden but clearly that's not intended. Using :not() like '.ba-theme-light :not(.ba-theme-dark) .ba-theme-light-hidden' and '.ba-theme-dark :not(.ba-theme-light) .ba-theme-dark-hidden' seems like a solution but it won't work since :not(.ba-theme-dark) and :not(.ba-theme-light) will become true for any elements in between that doesn't have the class inside the :not() selector.*/
/* .ba-theme-light .ba-theme-light-hidden,
.ba-theme-dark .ba-theme-dark-hidden,
.ba-theme-light.ba-theme-light-hidden,
.ba-theme-dark.ba-theme-dark-hidden {
    display: none !important;
} */

/*
 * Theme toggle
 */
.ba-theme-toggle {
    cursor: pointer;
}
.ba-theme-light .ba-theme-dark-icon,
.ba-theme-dark .ba-theme-light-icon {
    display: none !important;
}
@media (prefers-color-scheme: light) {
    :root:not(.ba-theme-light):not(.ba-theme-dark) .ba-theme-dark-icon {
        display: none !important;
    }
}
@media (prefers-color-scheme: dark) {
    :root:not(.ba-theme-light):not(.ba-theme-dark) .ba-theme-light-icon {
        display: none !important;
    }
}