/* Shared Bootstrap utility and focus shadows; Bootstrap 2/3 also load their own small adapters. */
:root {
  --bs-box-shadow: var(--box-shadow);
  --bs-box-shadow-sm: var(--box-shadow);
  --bs-box-shadow-lg: var(--box-shadow);
  --bs-btn-active-shadow: var(--box-shadow);
}

/* Bootstrap 5 defines button variables on .btn itself, above the :root values. */
.btn {
  --bs-btn-box-shadow: var(--box-shadow);
  --bs-btn-active-shadow: var(--box-shadow);
  --bs-btn-focus-box-shadow: var(--box-shadow);
}

.dropdown-menu {
  --bs-dropdown-box-shadow: var(--box-shadow);
}
.popover {
  --bs-popover-box-shadow: var(--box-shadow);
}
.modal {
  --bs-modal-box-shadow: var(--box-shadow);
}

.shadow,
.shadow-sm,
.shadow-lg,
.toast {
  box-shadow: var(--box-shadow) !important;
}

.form-control:focus,
.form-select:focus,
.custom-select:focus,
.form-check-input:focus,
.custom-control-input:focus ~ .custom-control-label::before,
.custom-file-input:focus ~ .custom-file-label,
.btn:focus,
.btn.focus,
.btn-check:focus + .btn,
.nav-link:focus-visible,
.navbar-toggler:focus,
.accordion-button:focus,
.page-link:focus,
.btn-close:focus,
.focus-ring:focus {
  box-shadow: var(--box-shadow) !important;
}

/* Keep vendor-specific pseudo-elements in separate lists: an unknown one
   otherwise invalidates the entire focus selector list in that browser. */
.form-range:focus::-webkit-slider-thumb,
.custom-range:focus::-webkit-slider-thumb {
  box-shadow: var(--box-shadow) !important;
}
.form-range:focus::-moz-range-thumb,
.custom-range:focus::-moz-range-thumb {
  box-shadow: var(--box-shadow) !important;
}
.custom-range:focus::-ms-thumb {
  box-shadow: var(--box-shadow) !important;
}

/* Bootstrap 4 uses badge links as buttons and gives each color its own fixed focus ring. */
a[class*="badge-"]:is(:focus, .focus) {
  box-shadow: var(--box-shadow) !important;
}

:is(.form-control, .form-select, .custom-select, .form-check-input,
  .btn, .nav-link, .navbar-toggler, .accordion-button, .page-link,
  .btn-close):focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td span.active {
  text-shadow: 0 -1px 0 color-mix(in srgb, var(--color-title) 35%, transparent);
}