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

[data-bs-theme="dark"] {
  --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,
[data-toggle-theme],
[data-toggle-fullscreen],
#btnSidebarLeftToggleOut,
#btnSidebarRightToggleOut,
#btnSidebarRightToggleIn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: 50%;
  background-color: transparent;
  color: var(--bs-body-color);
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
  cursor: pointer;
}

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

/* Hover/focus background by theme */
[data-bs-theme="light"] .btn-icon:hover,
[data-bs-theme="light"] .btn-icon:focus-visible {
  background-color: var(--toggle-bg-light);
}

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

/* Press feedback */
.btn-icon:active {
  transform: scale(.94);
}
.btn-icon:active i {
  transform: scale(.9);
  transition: transform .1s ease;
}

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

[data-bs-theme="light"] [data-toggle-theme],
[data-bs-theme="light"] #btnSidebarLeftToggleOut,
[data-bs-theme="light"] #btnSidebarRightToggleOut,
[data-bs-theme="light"] #btnSidebarRightToggleIn {
  --toggle-bg: var(--toggle-bg-light);
}

[data-bs-theme="dark"] [data-toggle-theme],
[data-bs-theme="dark"] #btnSidebarLeftToggleOut,
[data-bs-theme="dark"] #btnSidebarRightToggleOut,
[data-bs-theme="dark"] #btnSidebarRightToggleIn {
  --toggle-bg: var(--toggle-bg-dark);
}

[data-toggle-theme],
#btnSidebarLeftToggleOut,
#btnSidebarRightToggleOut,
#btnSidebarRightToggleIn {
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

[data-toggle-theme]:hover,
#btnSidebarLeftToggleOut:hover,
#btnSidebarRightToggleOut:hover,
#btnSidebarRightToggleIn:hover {
  background-color: var(--toggle-bg);
  transform: scale(1.05);
}

[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);
}