<button
    nxButton="tertiary small"
    class="nx-margin-bottom-0"
    [nxContextMenuTriggerFor]="nxvThemeSwitch"
    (contextMenuOpened)="_themeSwitchIsOpened = true"
    (contextMenuClosed)="_themeSwitchIsOpened = false"
    aria-label="switch color theme"
>
    <nx-icon name="fill-drip" nxIconPositionStart></nx-icon>
    <span class="label-text">{{ selected.displayName }}</span>
    <nx-icon name="chevron-down" nxIconPositionEnd [class.icon-rotated]="_themeSwitchIsOpened"></nx-icon>
</button>

<nx-context-menu #nxvThemeSwitch="nxContextMenu">
    @for (theme of themes; track theme) {
        <button nxContextMenuItem type="button" (click)="select(theme)" [value]="theme.name">{{ theme.displayName }}</button>
    }
</nx-context-menu>
