.vp-navbar {
  .vp-nav-links {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
  }

  .nav-item {
    position: relative;
    margin: 0 0.25rem;
    line-height: 2rem;

    &:first-child {
      margin-inline-start: 0;
    }

    &:last-child {
      margin-inline-end: 0;
    }

    > .nav-link {
      color: var(--dark-grey);

      &::after {
        content: " ";

        position: absolute;
        right: 50%;
        bottom: 0;
        left: 50%;

        height: 2px;
        border-radius: 1px;

        background: var(--theme-color-light);

        visibility: hidden;

        transition: left 0.2s ease-in-out, right 0.2s ease-in-out;
      }

      &.active {
        color: var(--theme-color);
      }

      &:hover,
      &.active {
        // stylelint-disable max-nesting-depth
        &::after {
          right: 0;
          left: 0;
          visibility: visible;
        }
        // stylelint-enable max-nesting-depth
      }
    }
  }
}