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

[data-bs-theme="dark"] {
  --toggle-bg: rgba(255, 255, 255, .2);
  --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 */

img.btn-icon {
  object-fit: cover;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  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:focus {
  outline: none;
  box-shadow: none;
}

/*.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.05rem;
  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);
}

/* 🟩 Bootstrap Ext · btn-link Focus Style */

.btn-link.link-primary {
  --bs-btn-color-rgb: var(--bs-primary-rgb);
}

.btn-link.link-danger {
  --bs-btn-color-rgb: var(--bs-danger-rgb);
}

.btn-link.link-success {
  --bs-btn-color-rgb: var(--bs-success-rgb);
}

.btn-link.link-info {
  --bs-btn-color-rgb: var(--bs-info-rgb);
}

.btn-link.link-warning {
  --bs-btn-color-rgb: var(--bs-warning-rgb);
}

.btn-link.link-secondary {
  --bs-btn-color-rgb: var(--bs-secondary-rgb);
}

.btn-link.link-light {
  --bs-btn-color-rgb: var(--bs-light-rgb);
}

.btn-link.link-dark {
  --bs-btn-color-rgb: var(--bs-dark-rgb);
}

.btn-link[class^="link-"],
.btn-link[class*=" link-"] {
  border-color: transparent;
}

  .btn-link[class^="link-"]:is(:active, :focus, :focus-visible),
  .btn-link[class*=" link-"]:is(:active, :focus, :focus-visible) {
    border-color: rgba(var(--bs-btn-color-rgb, var(--bs-primary-rgb)), .3);
    box-shadow: 0 0 .2rem .05rem rgba(var(--bs-btn-color-rgb, var(--bs-primary-rgb)), .2);
  }

/*******************************************/