/**
 * Touch-specific fixes for Angular Material menu submenu issues
 * Issue: https://github.com/super-productivity/super-productivity/issues/4436
 */

// Only apply these styles on touch devices
@media (hover: none) and (pointer: coarse) {
  // Add delay to submenu opening on touch devices
  .mat-mdc-menu-panel {
    // Delay pointer events briefly when menu opens
    &.mat-mdc-menu-panel-animating {
      .mat-mdc-menu-item {
        pointer-events: none !important;
      }
    }
  }

  // For nested/submenu triggers, add touch-action to prevent immediate selection
  .mat-mdc-menu-item[matMenuTriggerFor] {
    touch-action: manipulation;

    // Add a slight delay before the submenu can receive touch events
    &:active + .mat-mdc-menu-panel,
    &:focus + .mat-mdc-menu-panel {
      .mat-mdc-menu-content {
        pointer-events: none;
        animation: enablePointerEvents 0.3s forwards;
      }
    }
  }

  // Specifically for the project menu
  #projectMenu {
    .mat-mdc-menu-content {
      // Add padding to prevent edge touches
      padding: var(--s) 0;

      .mat-mdc-menu-item {
        // Add delay to touch responsiveness
        transition: background-color 0.15s ease-in-out;

        &:first-child {
          // Extra padding on first item to prevent accidental selection
          margin-top: var(--s);
        }
      }
    }
  }
}

// Highlight the source task when context menu is open
.context-menu-highlight {
  box-shadow: inset 0 0 0 2px var(--primary);
  z-index: 1;
  transition: box-shadow 200ms ease-out;
}

// Animation to re-enable pointer events after delay
@keyframes enablePointerEvents {
  0% {
    pointer-events: none;
  }
  99% {
    pointer-events: none;
  }
  100% {
    pointer-events: auto;
  }
}
