{# Appearance menu — native popover + chirp-theme .theme-dropdown styles (rail variant). #}
{% from "partials/docs_nav_icons.html" import docs_icon %}

{% set _menu_id = theme_menu_id | default("theme-menu-rail") %}
<div class="theme-controls" data-chirp-theme-menu>
  <button
    type="button"
    class="theme-dropdown__button"
    popovertarget="{{ _menu_id }}"
    popovertargetaction="toggle"
    title="Appearance"
    aria-label="Open appearance menu"
  >
    <span class="theme-dropdown__icon" aria-hidden="true">{{ docs_icon('monitor', 20) }}</span>
    <span class="theme-dropdown__label">Appearance</span>
    <span class="theme-dropdown__chevron" aria-hidden="true">{{ docs_icon('caret-down', 14) }}</span>
  </button>

  <div id="{{ _menu_id }}" popover class="theme-dropdown__menu--popover">
    <fieldset class="theme-menu-section">
      <legend class="separator">Mode</legend>

      <button type="button" data-appearance="system" class="theme-option">
        {{ docs_icon('monitor', 18) }}
        <span>System</span>
      </button>

      <button type="button" data-appearance="light" class="theme-option">
        {{ docs_icon('sun', 18) }}
        <span>Light</span>
      </button>

      <button type="button" data-appearance="dark" class="theme-option">
        {{ docs_icon('moon', 18) }}
        <span>Dark</span>
      </button>

      <button type="button" data-appearance="oled" class="theme-option">
        {{ docs_icon('circle', 18) }}
        <span>OLED</span>
      </button>
    </fieldset>
  </div>
</div>