/**
 * PopupMenu スタイル
 *
 * 汎用的なポップアップメニュー
 * アプリメニューやコンテキストメニューに使用
 */

/* ポップアップメニューコンテナ */
.popup-menu {
  position: fixed;
  z-index: var(--z-index-popup-menu);
  background-color: var(--kaku-bg-secondary);
  border: 1px solid var(--kaku-border-light);
  border-radius: 8px;
  box-shadow: var(--kaku-shadow-lg);
  padding: 8px 0;
  min-width: 180px;
  max-width: 280px;
}

/* 非表示 */
.popup-menu.hidden {
  display: none !important;
}

/* メニュー項目 */
.popup-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  color: var(--kaku-text-primary);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--kaku-transition-fast);
}

.popup-menu-item:hover {
  background-color: var(--kaku-bg-tertiary);
}

.popup-menu-item:active {
  background-color: var(--kaku-accent-primary);
  color: var(--kaku-text-inverse) !important;
}

.popup-menu-item:active .material-symbols-outlined {
  color: var(--kaku-text-inverse) !important;
}

.popup-menu-item:active .material-symbols-outlined {
  color: var(--kaku-text-inverse);
}

/* アイコン */
.popup-menu-item .material-symbols-outlined {
  font-size: 20px;
  color: var(--kaku-text-secondary);
}

.popup-menu-item:hover .material-symbols-outlined {
  color: var(--kaku-text-primary);
}

.popup-menu-item:active .material-symbols-outlined {
  color: var(--kaku-text-inverse);
}

/* ラベル */
.popup-menu-item > span:last-child {
  flex: 1;
}

/* 区切り線 */
.popup-menu-divider {
  margin: 8px 0;
  border: none;
  border-top: 1px solid var(--kaku-border-light);
}

/* =================================
   スマホ向けレスポンシブ
   ================================= */

@media (max-width: 767px) {
  .popup-menu {
    min-width: 200px;
    max-width: calc(100vw - 32px);
  }

  .popup-menu-item {
    padding: 14px 16px;
    font-size: 16px;
  }

  .popup-menu-item .material-symbols-outlined {
    font-size: 22px;
  }
}

/* =================================
   ダークモード対応
   ================================= */

@media (prefers-color-scheme: dark) {
  .popup-menu {
    background-color: var(--kaku-bg-secondary);
    border-color: var(--kaku-border-dark);
  }
}