/*@example <a is="navigation-link" routerLink="examples/button.html" has="home-icon">Button</a>*/
@layer component {
    [now~=open] {
        & > [is=navigation-link]  {
            color: var(--navigation-link-open-color, var(--foreground-color));
        }
    }
    [is=navigation-link] {
        display: inline-flex;
        align-items: center;
        color: var(--navigation-link-color, var(--foreground-medium-soft-color));
        text-decoration: none;

        &[now~=active] {
            color: var(--navigation-link-active-color, var(--foreground-color));
        }

        & [is=icon],
        &[has*=-icon]::before {
            font-size: var(--navigation-link-icon-size, var(--font-size-m));
            margin-right: var(--navigation-link-icon-gap, var(--space-xs));
        }
    }


}