.va-sidebarnav {
  $padding-override: 10px 40px 10px 12px;
  margin: 2.5rem 0 0 2.5rem;
  background-color: var(--vads-color-white);

  &__sub-section {
    margin: 0;
    padding: 1.25rem 0rem 0.625rem 0.9375rem;
    color: var(--vads-color-base);
  }

  .usa-accordion {
    .usa-accordion-button {
      position: relative;
      padding: $padding-override;
      padding-left: 16px; // making the buttons line up vertically with links
      font-size: 15px;
      va-icon {
        position: absolute;
        right: 16px;
        top: 6px;
      }
      &[aria-expanded=false] {
        background-image: none;
        va-icon[icon="add"] {
          display: inline-block;
        }
        va-icon[icon="remove"] {
          display: none;
        }
      }
      &[aria-expanded=true] {
        background-image: none;
        va-icon[icon="add"] {
          display: none;
        }
        va-icon[icon="remove"] {
          display: inline-block;
        }
      }
    }
    .usa-sidenav-list a {
      padding: $padding-override;
    }
  }
  .usa-accordion-content[aria-hidden="false"] {
    background-color: var(--vads-color-gray-lightest);
  }

  .usa-sidenav-list {
    border: none;
    > li {
      a {
        position: relative;
        display: flex;
        align-items: center;
        padding: $padding-override;
      }
      i {
        position: initial;
        right: initial;
        color: initial;
        vertical-align: initial;
        font-size: initial;
        padding-left: initial;
      }
      .site-sidenav-status {
        order: -1;
      }
      a:hover,
      a.usa-current:hover {
        // This may be a bug in formation as 
        // the item you are hovering over has different padding 
        // and thus unintentionally (IMHO) moves. This defeats that.
        padding: $padding-override;
      }
      a.usa-current {
        cursor: pointer;
      }
    }
    .active-level .usa-sidenav-sub_list li>a:hover {
      // This may be a bug in formation as 
      // the item you are hovering over has different padding 
      // and thus unintentionally (IMHO) moves. This defeats that.
      padding-left: 28px;
    }
  }

  .usa-sidenav-list .usa-accordion + .usa-accordion {
    margin-top: 0;
  }
}

.va-sidebarnav--components,
.va-sidebarnav--patterns {
  .usa-accordion {
    .usa-accordion-button {
      padding-left: 31px; // override of the override to align the buttons
    }
  }
}