/* Выпадающее меню у кнопки.

   Небольшое окно на два-три дела: значок слева, слово рядом, опасное
   красным и последним. Лежит слоем поверх всего, у той кнопки, которую
   нажали, и не сдвигает под собой ни строки.

   Ставится по месту кнопки скриптом (ui/menu.js), поэтому здесь только
   вид: координаты приходят снаружи. */

.menu {
  position: absolute;
  z-index: 60;
  min-width: 44cqw;
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 14px 34px var(--sheet-shadow);
  animation: menu-in var(--fast) var(--ease);
}

.menu__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: none;
  border: none;
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background var(--fast) var(--ease);
}

.menu__mark {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--text-dim);
}

.menu__mark .icon {
  width: var(--fs-md);
  height: var(--fs-md);
}

/* Опасное — красным целиком, и значок тоже: полумеры здесь читаются
   как обычный пункт, мимо которого можно промахнуться. */
.menu__row--danger,
.menu__row--danger .menu__mark { color: var(--danger); }

.menu__row:active { background: var(--surface); }

@media (hover: hover) {
  .menu__row:hover { background: var(--surface); }
}

@keyframes menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}