.sidebar_first {
  background-color: var(--body-bg);
  padding-top: 60px;

  .navigation {
    background-color: transparent;
    border-color: transparent;
  }

  .navbar-nav {
    --bs-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-link-font-weight: ;
    --bs-nav-link-color: var(--bs-link-color);
    --bs-nav-link-hover-color: var(--bs-link-hover-color);
    --bs-nav-link-disabled-color: #6c757d;
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
  }

  .nav-link {
    display: block;
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    font-size: var(--fs-base);
    font-weight: var(--bs-nav-link-font-weight);
    color: var(--bs-nav-link-color);
    text-decoration: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
    border-radius: 0.375rem;
    color: var(--text-clr-base);
    margin-bottom: 2px;

    &:hover {
      background-color: var(--text-clr-invert);
    }
  }

  .nav-link {
    &.active, &.is-active {
      color: var(--text-clr-invert);
      background-color: var(--clr-primary);
    }
  }
}