/* Tab Styles */
.tab__wrapper {
  padding: var(--spacing-100, 8px);
  border: 1px solid var(--grey-500, #c6c6c6);
  border-radius: 4px;

  .nav.nav-tabs {
    margin-bottom: var(--spacing-100, 8px);
    padding-left: 0;
    border-bottom: 1px solid var(--grey-500, #c6c6c6);
  }

  .nav.nav-tabs > li {
    margin-top: 0;
    margin-bottom: -1px;
  }

  .nav.nav-tabs > li > a {
    font: var(--label-font-small-bold);
    /* font-weight: 600; */
    color: var(--grey-900, #252525);
    border: none;
    border-bottom: 1px solid var(--grey-500, #c6c6c6);
    position: relative;
    border-radius: 0;
  }

  .nav.nav-tabs > li.active > a {
    color: var(--brand-primary-500, #001080);
  }

  .nav.nav-tabs > li > a:hover {
    color: var(--brand-primary-500, #001080);
  }

  .nav.nav-tabs > li > a:focus-visible {
    outline-offset: 0;
  }

  .nav.nav-tabs > li > a::before {
    content: "";
    display: block;
    position: absolute;
    top: 1px;
    left: var(--spacing-100, 8px);
    width: calc(100% - (var(--spacing-100, 8px) * 2));
    height: 100%;
    border-bottom: 1px solid transparent;
    pointer-events: none;
  }

  .nav.nav-tabs > li.active > a::before {
    border-bottom-color: var(--brand-primary-500, #001080);
    border-bottom-width: 2px;
  }

  .nav.nav-tabs > li > a:hover::before {
    border-bottom-color: var(--brand-primary-500, #001080);
  }
}