@use '../../theme/styles' as theme;

.wr-context-menu-overlay {
  z-index: var(--wr-z-overlay, 1000);
  // CDK's GlobalPositionStrategy sets `position: static` as an inline
  // style. We override it so the directive can write top/left directly
  // to the pane. The menu is anchored to the DOCUMENT — the directive's
  // scroll listener keeps the visible position in sync as the user
  // scrolls (top/left = pageX/pageY - currentScroll), so the menu moves
  // along with the content it was opened over (native + PrimeNG style).
  position: fixed !important;

  // Open / close animation. The directive toggles `--open` after the
  // pane is in the DOM (next frame) so the transition runs from the
  // default state below into the visible state, and again from visible
  // back to default on close — the directive holds the overlay alive
  // for the transition duration before disposing. Timing mirrors the
  // shared `wr-overlay-in` keyframe used by popover / popconfirm so the
  // open feel is consistent across all overlay families.
  opacity: 0;
  transform: scale(0.96);
  transform-origin: top left;
  transition:
    opacity var(--wr-overlay-duration) var(--wr-overlay-ease),
    transform var(--wr-overlay-duration) var(--wr-overlay-ease);

  &--open {
    opacity: 1;
    transform: scale(1);
  }

  @media (prefers-reduced-motion: reduce) {
    transition: none;
    transform: none;
  }
}

.wr-context-menu {
  min-width: 10rem;
  padding: 0.3125rem;
  background: var(--wr-color-white, #fff);
  border: 1px solid var(--wr-color-light);
  // Soft rounded corners — smooth-br opts into native `corner-shape:
  // squircle` where supported (Chrome 145+) and falls back to plain
  // border-radius elsewhere.
  @include theme.smooth-br(var(--wr-border-radius-base));
  box-shadow: var(--wr-shadow-overlay);
}

.wr-context-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4375rem 0.625rem;
  @include theme.smooth-br(var(--wr-border-radius-sm));
  color: var(--wr-color-dark);
  font-size: var(--wr-text-sm);
  cursor: pointer;
  user-select: none;
  transition:
    background var(--wr-transition-base),
    color var(--wr-transition-base);

  &:hover,
  &:focus-visible {
    background: var(--wr-color-primary-soft);
    color: var(--wr-color-primary);
    outline: none;
  }

  &--disabled {
    color: var(--wr-color-medium);
    opacity: 0.6;
    pointer-events: none;
  }

  &__icon {
    flex: 0 0 auto;
    // Menu rows are compact (small font-size + tight padding) — drop
    // the icon below the default 1.5rem so it doesn't dominate.
    --wr-icon-size: 1rem;
    color: currentColor;
  }

  &__label {
    flex: 1 1 auto;
  }

  // Trailing chevron, shown only on items that own a `[submenu]`.
  // `wr-icon__svg` styles the SVG to 1em (≈ font-size of the row).
  &__chevron {
    flex: 0 0 auto;
    width: 0.8125rem;
    height: 0.8125rem;
    color: var(--wr-color-medium);
    margin-left: 0.25rem;
  }

  &--has-submenu:hover &__chevron,
  &--has-submenu:focus-visible &__chevron {
    color: var(--wr-color-primary);
  }
}

// Horizontal separator between groups of items.
.wr-context-menu-divider {
  display: block;
  height: 1px;
  margin: 0.25rem 0;
  background: var(--wr-color-light);
}