/* ============================================================================================ */
/* THEME TOGGLE: the "Dark Mode" switch in the user menu (app/shell/shell.html).                 */
/* The row itself is a normal navbar .dropdown-item; this draws the switch on its right.        */
/* ============================================================================================ */

/* must out-rank "#main-navbar .navbar-collapse .navbar-nav li > a:not(.btn)" (display: inline-block) */
#main-navbar .navbar-collapse .navbar-nav li > a.dropdown-item.theme-toggle {
    display: flex;
    align-items: center;
}
.theme-toggle .theme-toggle-label {
    margin-right: 16px;
}
.theme-toggle .theme-toggle-switch {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 30px;
    height: 16px;
    margin-left: auto;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    background-color: rgba(255, 255, 255, 0.2);
    transition: background-color var(--app-transition-fast), border-color var(--app-transition-fast);
}
.theme-toggle .theme-toggle-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ffffff;
    transition: transform var(--app-transition-fast);
}
.theme-toggle.is-on .theme-toggle-switch {
    background-color: var(--app-color-primary-light);
    border-color: var(--app-color-primary-light);
}
.theme-toggle.is-on .theme-toggle-switch::after {
    transform: translateX(14px);
}