/**
 * Menu System Stylings
 * Cupertino-style dropdown menus using Liquid Glass effect
 */

/* Menu trigger wrapper */
.menu-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.menu-trigger__target {
  cursor: pointer;
  padding: 4px 10px 2px 10px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  transition: background-color var(--duration-instant) ease-out;
}

.menu-trigger__target:hover,
.menu-trigger--open .menu-trigger__target {
  background-color: rgba(230, 230, 255, 0.15);
}

/* Backdrop for click-outside-to-dismiss */
.menu-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

/* Menu container */
.menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  z-index: 1000;
  border-radius: 10px;
  pointer-events: none;
  visibility: hidden;
  isolation: isolate;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.4),
    0 2px 10px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition:
    opacity var(--duration-normal) ease-out,
    visibility 0s linear var(--duration-normal);
}

.menu--visible {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transition:
    opacity var(--duration-instant) ease-out,
    visibility 0s linear 0s;
}

/* Glass layer - same effect as dock */
.menu-glass {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--lg-tint-gradient);
  backdrop-filter: blur(15px) saturate(1) brightness(1.1);
  -webkit-backdrop-filter: blur(15px) saturate(1) brightness(1.1);
  opacity: 0;
  transition: opacity var(--duration-normal) ease-out;
}

.menu--visible .menu-glass {
  opacity: 1;
  transition: opacity var(--duration-instant) ease-out;
}

/* Shine layer - specular highlights */
.menu-shine {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  border: 0.5px solid rgba(255, 255, 255, 0.25);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.05) 3%,
    transparent 15%
  );
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.15),
    inset 0 -1px 1px rgba(255, 255, 255, 0.05);
  opacity: 0;
  transition:
    opacity var(--duration-normal) ease-out,
    box-shadow var(--duration-normal) ease-out;
}

.menu--visible .menu-shine {
  opacity: 1;
  transition: opacity var(--duration-instant) ease-out;
}

/* Content layer */
.menu-content {
  position: relative;
  z-index: 2;
  padding: 5px 0;
  opacity: 0;
  transition: opacity var(--duration-normal) ease-out;
}

.menu--visible .menu-content {
  opacity: 1;
  transition: opacity var(--duration-instant) ease-out;
}

/* ============================================
   MENU ITEMS - Cupertino styling
   ============================================ */

/* Action item */
.menu-item {
  display: flex;
  align-items: center;
  padding: 2px 12px;
  margin: 0 5px;
  border-radius: 6px;
  cursor: pointer;
  min-height: 20px;
  gap: 4px;
  color: white;
  font-size: 13px;
  font-family: inherit;
}

.menu-item:hover {
  background-color: var(--cupertino-blue);
}

/* Leading icon container */
.menu-item__leading {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -4px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.menu-item__leading svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Label */
.menu-item__label {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Spacer between label and trailing content */
.menu-item__spacer {
  flex: 1;
  min-width: 24px;
}

/* Trailing text (keyboard shortcuts) */
.menu-item__trailing-text {
  color: rgba(200, 200, 255, 0.4);
  font-size: 13px;
  flex-shrink: 0;
}

.menu-item:hover .menu-item__trailing-text {
  color: rgba(255, 255, 255, 0.9);
}

/* Trailing icon container */
.menu-item__trailing {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.5);
}

.menu-item:hover .menu-item__trailing {
  color: white;
}

.menu-item__trailing svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Disabled state */
.menu-item--disabled {
  color: rgba(255, 255, 255, 0.35);
  cursor: default;
  pointer-events: none;
}

/* Destructive state (e.g., Delete) */
.menu-item--destructive {
  color: #ff6b6b;
}

.menu-item--destructive:hover {
  background-color: rgba(255, 107, 107, 0.85);
  color: white;
}

/* ============================================
   MENU ITEM BLINK ANIMATION
   Classic macOS blink: toggles highlight 2 times before action
   4 equal intervals (25% each = 60ms): on-off-on-off
   ============================================ */
@keyframes menu-item-blink {
  0% {
    background-color: var(--cupertino-blue);
  }
  25% {
    background-color: transparent;
  }
  50% {
    background-color: var(--cupertino-blue);
  }
  75% {
    background-color: transparent;
  }
  100% {
    background-color: transparent;
  }
}

.menu-item--blinking {
  animation: menu-item-blink var(--duration-menu-blink) steps(1);
  pointer-events: none;
}

.menu-item--destructive.menu-item--blinking {
  animation-name: menu-item-blink-destructive;
}

@keyframes menu-item-blink-destructive {
  0% {
    background-color: rgba(255, 107, 107, 0.85);
  }
  25% {
    background-color: transparent;
  }
  50% {
    background-color: rgba(255, 107, 107, 0.85);
  }
  75% {
    background-color: transparent;
  }
  100% {
    background-color: transparent;
  }
}

/* Divider */
.menu-divider {
  height: 1px;
  margin: 5px 12px;
  background: rgba(255, 255, 255, 0.15);
}

/* Section header */
.menu-header {
  padding: 6px 12px 4px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}