@digitallinguistics/design/components/NavList/NavList.less

The design system for Digital Linguistics (DLx) projects.

@import (reference) 'List/List.less';

.nav-list {

  .list;

  cursor: pointer;

  .current {
    position: relative;
  }

  .current::before {
    background-color  : var(--blue-4);
    inset-block-end   : calc(-0.5 * var(--border-width));
    content           : '';
    inset-inline-start: 0;
    position          : absolute;
    inset-block-start : 0;
    inline-size       : 0.25em;
  }

  .current:first-child::before {
    border-start-start-radius: var(--border-radius);
  }

  .current:last-child::before {
    border-end-start-radius: var(--border-radius);
  }

  li {
    padding: var(--text-padding);
  }

  li:hover {
    background-color: var(--gray-1);
  }

  @media (prefers-color-scheme: dark) {

    li:hover {
      background-color: var(--blue-1);
      color           : var(--background-color-dark);
    }

    li:last-child:hover {
      margin-block-end: -1px;
    }

  }

}