[data-component~="components/nav_group"] {
  &:not(:last-child) {
    margin-bottom: .5rem;
  }
  > div {
    padding: .25rem .5rem;
    font-weight: 600;
    font-size: var(--font-xs);
    > span {
      vertical-align: middle;
    }
  }
  ul {
    margin: 0;
    padding: .25rem .5rem;
    list-style-type: none;
  }
  &[data-active] {
    &:not(:has([data-component~="components/nav_group_item"][data-active])) {
      > div > span {
        position: relative;
        &::before {
          content: '';
          position: absolute;
          pointer-events: none;
          width: .375rem;
          height: .375rem;
          border-radius: 9999px;
          background-color: var(--color-base-50);
          top: 50%;
          transform: translateY(-50%);
        }
        @media (width >= 768px) {
          &::before {
            right: -.75rem;
          }
        }
        @media (width < 768px) {
          &::before {
            left: -.75rem;
          }
        }
      }
    }
  }
}