:root {
    --toggle-bg: rgba(0, 0, 0, 0.05);
    --bs-body-bg: #f3f4f7;
    --bs-tertiary-bg: #f7f8fb;
}

[data-bs-theme="dark"] {
    --toggle-bg: rgba(255, 255, 255, 0.125);
    --bs-body-bg: #1d222b;
    --bs-tertiary-bg: #212631;
    /* custom showdow: extend to bootstrap dark theme */
    --bs-box-shadow: 0 0.55rem 1.15rem rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.03);
    --bs-box-shadow-sm: 0 0.15rem 0.3rem rgba(0, 0, 0, 0.47), 0 0 0 1px rgba(255, 255, 255, 0.025);
    --bs-box-shadow-lg: 0 1.1rem 2.8rem rgba(0, 0, 0, 0.73), 0 0 0 1px rgba(255, 255, 255, 0.045);
    --bs-box-shadow-inset: inset 0 1px 2px rgba(255, 255, 255, 0.045);
}

/* Gradient */
.bg-body-gradient {
    --uo-body-bg1: color-mix(in srgb, #384055 100%, transparent);
    --uo-body-bg2: color-mix(in srgb, var(--bs-body-bg) 100%, transparent);
    background: linear-gradient(45deg, var(--uo-body-bg1) 0%, var(--uo-body-bg2) 100%);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .bg-body-gradient {
    background: none;
}

/* Base icon button */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: 50%;
    color: var(--bs-body-color);
    background-color: var(--toggle-bg);
    transition: background-color .2s ease, color .2s ease, transform .1s ease;
    cursor: pointer;
}

#btnSidebarLeftToggleOut {
    border: 1px solid rgba(var(--bs-body-color-rgb), .5);
    background-color: rgba(var(--bs-tertiary-bg-rgb), .5);
}

    #btnSidebarLeftToggleOut i {
        transform: scale(1.25) translateY(1.5px);
    }

/*[data-bs-theme="dark"]
#btnSidebarLeftToggleOut {
    border: 1px solid rgba(var(--bs-body-color-rgb), .5);
}*/

/* Hover/focus background by theme */
.btn-icon:hover,
.btn-icon:focus-visible {
    --toggle-bg-hover: color-mix(in srgb, black 8%, var(--toggle-bg));
    background-color: var(--toggle-bg-hover);
    transform: scale(1.1) !important;
}

[data-bs-theme="dark"] .btn-icon:hover,
[data-bs-theme="dark"] .btn-icon:focus-visible {
    --toggle-bg-hover: color-mix(in srgb, white 10%, var(--toggle-bg));
    background-color: var(--toggle-bg-hover);
}

/* Press feedback */
.btn-icon:active {
    transform: scale(1) !important;
}

/*    .btn-icon:active i {
        transform: scale(.95) !important;
        transition: transform .15s ease;
    }*/

/* Theme toggles + side toggles */
#btnSidebarLeftToggleOut i,
#btnSidebarRightToggleOut i,
#btnSidebarRightToggleIn i,
[data-toggle-theme] i {
    font-size: 1.3rem;
    line-height: 1;
}

    [data-toggle-theme]:focus-visible,
    #btnSidebarLeftToggleOut:focus-visible,
    #btnSidebarRightToggleOut:focus-visible,
    #btnSidebarRightToggleIn:focus-visible {
        outline: 2px solid var(--bs-body-color);
        outline-offset: 2px;
    }

    [data-toggle-theme]:hover i {
        filter: brightness(1.3);
    }