/* frozen_string_literal: true */

/* ==========================================================================
   Dropdown Component
   통합된 드롭다운 스타일 (헤더, 메뉴 등 모든 드롭다운에 사용)
   ========================================================================== */

.dropdown {
  display: none;
  flex-direction: column;
  gap: var(--spacing-section);
  position: absolute;
  top: 100%;
  right: 0;
  width: max-content;
  min-width: 120px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-dropdown);
  padding: var(--spacing-section);
  z-index: var(--z-dropdown);
}

.dropdown.open {
  display: flex;
}

/* Position modifiers */
.dropdown--center {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

.dropdown--scroll {
  max-height: 240px;
  overflow-x: hidden;
  overflow-y: auto;
}

/* 위로 열리는 드롭다운 (공간 부족 시) */
.dropdown--up {
  top: auto;
  bottom: 100%;
  margin-bottom: var(--spacing-2);
}

/* Wrapper for positioning */
.dropdown-wrapper {
  position: relative;
}

/* ---------------------------------------------------------------------------
   Dropdown Items
   --------------------------------------------------------------------------- */
.dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  width: 100%;
  padding: var(--spacing-list-sm) 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-primary);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  text-align: left;
  white-space: nowrap;
  /* iOS 터치 지원 */
  -webkit-tap-highlight-color: var(--color-badge-bg);
  touch-action: manipulation;
}

.dropdown__item:hover {
  background: var(--color-hover-subtle);
}

.dropdown__item.active {
  font-weight: var(--font-weight-medium);
}

.dropdown__item--danger {
  color: var(--color-danger);
}

.dropdown__item--danger:hover {
  background: var(--color-danger-subtle);
}

.dropdown__item svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  flex-shrink: 0;
  display: inline-block;
  color: currentColor;
  pointer-events: none;  /* iOS: 터치 이벤트가 부모로 전달되도록 */
}

/* Icon spacer (same width as icon for alignment) */
.dropdown__icon-spacer {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  flex-shrink: 0;
}

/* button_to로 생성된 form 요소 스타일 리셋 */
.dropdown__item form {
  display: contents;
}

/* button_to로 .dropdown__item 버튼이 form으로 감싸진 경우:
   form이 .dropdown의 flex 자식이 되면서 button은 손자가 됨.
   form에 display: contents를 적용해 button이 flex 자식처럼 동작하게 함. */
.dropdown > form.button_to {
  display: contents;
}

/* Ensure button_to-wrapped .dropdown__item buttons keep flex display
   and icons render properly. button element has browser default display
   which can override .dropdown__item { display: flex } on some browsers. */
button.dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font: inherit;
  text-align: left;
}

/* Force SVG icon rendering for ALL dropdown item types (a, button, form-wrapped).
   !important overrides any accidental display:none / size:0 from parent styles.
   stroke/fill/color ensure lucide icons render visibly. */
.dropdown__item svg,
a.dropdown__item > svg,
button.dropdown__item > svg {
  width: var(--icon-size-sm) !important;
  height: var(--icon-size-sm) !important;
  min-width: var(--icon-size-sm);
  min-height: var(--icon-size-sm);
  flex-shrink: 0;
  display: inline-block !important;
  stroke: currentColor;
  fill: none;
  color: currentColor;
  opacity: 1;
  visibility: visible;
}

/* 터치 트리거 버튼의 SVG도 pointer-events: none */
[data-action*="dropdown#toggle"] svg {
  pointer-events: none;
}