department-of-veterans-affairs/vets-website

$nav-item-padding: units-px(1) units-px(2) units-px(1) units-px(1.5);

@mixin subnav-item {
  list-style: none;
  margin-bottom: 0;

  a {
    border-left: 4px solid transparent;
    display: inline-block;
    padding: $nav-item-padding;
    text-decoration: none;
    width: 100%;

    &:hover,
    &:focus {
      background-color: var(--vads-color-primary-alt-lightest);
      border-color: var(--vads-color-link);
      transition: background-color 0.1s ease-in-out,
        border-color 0.1s ease-in-out, padding 0.1s ease-in-out;
    }
    &.is-active {
      background-color: var(--vads-color-base-lightest);
      border-left: 4px solid var(--vads-color-base);
      color: var(--vads-color-black);
      font-weight: bold;
      padding-left: units-px(1.5);
    }
  }
}

// util to make sure a focus ring is visible
.focus-ring:focus {
  outline: 2px solid !important;
  outline-color: var(--vads-color-action-focus-on-light) !important;
  outline-offset: 0;
}