:root {
  --w-ref-focusOutline: @focus-outline;
  --w-sys-focusOutline: var(--w-ref-focusOutline);
}

.id7-outline() {
  outline: 3px solid var(--w-sys-focusOutline);
  color: #0b0c0c !important;
  background-color: var(--w-sys-focusOutline) !important;
  box-shadow: 0 -2px var(--w-sys-focusOutline), 0 6px #0b0c0c;
  text-decoration: none !important;
  transition-duration: 0s;
}

// This augments Bootstrap's own tab-focus mixin which is how it gets applied to most links
// (the aforementioned mixin has been emptied out so these should be the only rules)
.tab-focus() {
  outline-offset: 0;
  .id7-outline();
}

a:focus img {
  background-color: var(--w-sys-focusOutline)
}

a:focus .id7-notifications-badge .counter-value {
  color: white;
}

.open > a:focus, .dropdown-menu > .active > a:focus, .dropdown-toggle:focus, [role="button"]:focus {
  .id7-outline();
}

.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
  box-shadow: none;
}

input[type=checkbox]:focus, input[type=radio]:focus {
  box-shadow: none;
}