@layer ds_components {
  .comp-nav {
    display: flex;
    flex-direction: column;
    justify-content: start;

    > * + * {
      margin-block-start: var(--ds-component-nav-gap);
    }

    > ul {
      border-left: var(--ds-component-nav-link-active-border-width) solid
        var(--ds-component-nav-color-border-open);
    }

    ul {
      list-style: none;
      padding-inline-start: var(--ds-component-nav-list-level-0-padding-inline);
      padding-block: var(--ds-component-nav-list-level-0-padding-block);
      margin: 0;

      ul {
        padding-block: var(--ds-component-nav-list-level1-padding-block);
        padding-inline-start: var(
          --ds-component-nav-list-level1-padding-inline
        );
      }

      ul ul {
        padding-block: var(--ds-component-nav-list-level2-padding-block);
        padding-inline-start: var(
          --ds-component-nav-list-level2-padding-inline
        );
      }
    }

    li > ul {
      display: none;
    }

    li[data-open] > ul {
      display: block;
    }

    li + li {
      margin-block-start: var(--ds-component-nav-link-gap);
    }

    li[data-open] > a:not([aria-current="page"]) {
      color: var(--ds-component-nav-color-content-open);
      background-color: var(--ds-component-nav-color-background-open);
      border-color: var(--ds-component-nav-color-border-open);
    }

    > p {
      margin-block-end: var(--ds-component-nav-category-margin-block-end);
      text-transform: var(--ds-component-nav-category-text-transform);
      font-weight: var(--ds-component-nav-category-font-weight);
      letter-spacing: var(--ds-component-nav-letter-spacing);
    }

    li a {
      text-decoration: none;
      padding-inline: var(--ds-component-nav-link-padding-inline);
      border-radius: var(--ds-component-nav-link-radius);
      transition: var(--ds-component-nav-link-transition);
      border-left: var(--ds-component-nav-link-active-border-width) solid
        var(--ds-component-nav-color-border);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
      display: inline-block;
      transform: translateX(
        calc(var(--ds-component-nav-link-active-border-width) * -1)
      );

      &:hover {
        color: var(--ds-component-nav-color-content-hover);
        background-color: var(--ds-component-nav-color-background-open);
      }
    }

    li a[aria-current="page"] {
      font-weight: var(--ds-component-nav-link-active-font-weight);
      color: var(--ds-component-nav-color-content-current);
      background-color: var(--ds-component-nav-color-background-current);
      border-color: var(--ds-component-nav-color-border-current);
    }

    > a {
      transform: translateX(var(--ds-semantic-ui-outline-width-focus));
    }
  }
}