.nav-left--toggle.btn {
    display: block;
    margin: 0 auto var(--spacing-sm);
    width: 100%;
}
@media screen and (min-width: 1024px) {
    .nav-left--toggle.btn {
        display: none;
    }
}

.nav-left--toggle-icon {
    &::after {
        text-align: center;
        /* width: 28px;
        height: 28px; */
        display: inline-block;
        content: "\f0c9";
        line-height: var(--line-height);
        font-family: var(--fa-style-family-classic);
        font-weight: 900;
        margin-left: var(--spacing-xs);
    }

    &.active::after {
        transform: rotate(-180deg);

    }
}

/* 
.nav-left--list {
    display: none;
}

@media screen and (min-width: 1024px) {
    .nav-left--list {
      display: block;
    }
} 
*/


.nav-left--list.accordion {
  /* --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); */
  --bs-accordion-btn-color: var(--bs-primary);
  --bs-accordion-btn-padding-x: var(--spacing-md);
  --bs-accordion-btn-padding-y: var(--spacing-sm);
  --bs-accordion-active-bg: rgba( var(--bs-tertiary-rgb), 0.5);
  --bs-accordion-border-color: var(--bs-accordion-active-bg);
  --bs-accordion-active-color: var(--bs-primary) !important;
  border: 0;
}

.nav-left--listitem {
  padding: var(--spacing-xs) var(--spacing-sm) 0;
  border: 0;

  &.last {
    padding-bottom: var(--spacing-xs) !important;
  }

  &.active {}

  .list-group-item {
    padding: 0;
  }
}

.accordion-button {
  align-items: center;
  justify-content: space-between;
  
  .h4 {
    margin-bottom: 0;
  }

  &::after {
    margin-left: var(--spacing-sm);
  }
}


.nav-left--listitem-title {
  display: flex;
  padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
  align-items: center;
  font-size: var(--fs-h6);
  color: var(--bs-accordion-btn-color);
  background-color: var(--bs-accordion-btn-bg);
  border-radius: var(--bs-border-radius);
  transition: all 0.2s cubic-bezier(0.47, 0, 0.745, 0.715);
  justify-content: space-between;
  border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);

  &:hover,
  &.active {
    color: var( --bs-accordion-active-color );
    background-color: var( --bs-accordion-active-bg );
  }

  &.parent {
    justify-content: space-between;
    align-items: center;
    background-color: var(--gray-xlight);
  }

  .is-title {
    text-transform: uppercase;
  }

  &.lvl-1 {
    padding-left: var(--spacing-md);
  }

  &,
  &:visited {
    text-decoration: none;
  }

  
  .bi {
    --bs-icon-link-transform: scale(1) translateY(0px);
  }
  &:hover {
    .bi {
      animation: fa-beat 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
    }
  }
}

/* bootstrap .icon-link.icon-link-hover causes ::before ::after to stack vertically... */
/* when using .bi on the icon. thank you flex box i guess */
/* .fad:before has position: absolute; why doesnt the after? */
/* adding this here as it seems like an suuuuper smol oversite from the font awesome team */
.fa-duotone:after,
.fad:after {
  position: absolute;
  
}