/**
 * Vertical folder-style tabs.
 *
 * Bootstrap .nav-tabs is horizontal-only. Pair this modifier with .nav.nav-tabs.flex-column
 * and a sibling pane:
 *
 * <div class="d-flex align-items-stretch">
 *   <div class="nav flex-column nav-tabs nav-tabs--vertical" role="tablist" aria-orientation="vertical">…</div>
 *   <div class="tab-content nav-tabs--vertical__content flex-grow-1">…</div>
 * </div>
 *
 * The active tab omits its right border so it reads as a file-folder tab opening into the pane.
 */

.nav-tabs.nav-tabs--vertical {
  --nav-tabs-vertical-bg: var(--bs-nav-tabs-link-active-bg, var(--text-inverse, #fff));
  --nav-tabs-vertical-border-width: var(--bs-nav-tabs-border-width, 1px);
  --nav-tabs-vertical-border-color: var(--bs-nav-tabs-border-color, var(--brand-border, #dee2e6));
  --nav-tabs-vertical-radius: var(--bs-nav-tabs-border-radius, 0.375rem);
  --nav-tabs-vertical-active-color: var(--bs-nav-tabs-link-active-color, var(--brand-navy, #355d73));
  --nav-tabs-vertical-hover-border-color: var(--bs-nav-tabs-link-hover-border-color, var(--brand-border, #dee2e6));

  flex-shrink: 0;
  border-bottom: 0;
}

.nav-tabs--vertical .nav-link {
  position: relative;
  z-index: 0;
  margin-bottom: 0;
  margin-right: calc(-1 * var(--nav-tabs-vertical-border-width));
  border: var(--nav-tabs-vertical-border-width) solid transparent;
  border-radius: var(--nav-tabs-vertical-radius) 0 0 var(--nav-tabs-vertical-radius);
}

.nav-tabs--vertical .nav-link:hover,
.nav-tabs--vertical .nav-link:focus-visible {
  isolation: isolate;
  border-color: var(--nav-tabs-vertical-hover-border-color);
  border-right-color: transparent;
}

.nav-tabs--vertical .nav-link.active,
.nav-tabs--vertical .nav-item.show .nav-link {
  z-index: 1;
  color: var(--nav-tabs-vertical-active-color);
  background-color: var(--nav-tabs-vertical-bg);
  border-color: var(--nav-tabs-vertical-border-color);
  border-right-color: transparent;
}

.nav-tabs--vertical__content {
  min-width: 0;
  background-color: var(--bs-nav-tabs-link-active-bg, var(--text-inverse, #fff));
  border: var(--bs-nav-tabs-border-width, 1px) solid var(--bs-nav-tabs-border-color, var(--brand-border, #dee2e6));
  border-radius: 0 var(--bs-nav-tabs-border-radius, 0.375rem) var(--bs-nav-tabs-border-radius, 0.375rem) var(--bs-nav-tabs-border-radius, 0.375rem);
}