.record-action-menu {
  position: relative;
  z-index: 0;
  flex: none;
  margin-inline-start: auto;
}

.record-action-menu[open] {
  z-index: 20;
}

.record-action-menu__trigger {
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  list-style: none;
}

.record-action-menu--small-trigger .record-action-menu__trigger {
  inline-size: 1.875rem;
  block-size: 1.875rem;
}

.record-action-menu__trigger::-webkit-details-marker {
  display: none;
}

.record-action-menu__panel {
  position: absolute;
  z-index: 20;
  inset-block-start: var(--record-action-menu-block-offset, calc(-1 * var(--space-xl)));
  inset-inline-start: calc(100% + var(--space-sm));
  inline-size: min(17.5rem, calc(100vw - (2 * var(--space-md))));
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-context-menu);
  color: var(--color-text-primary);
  transform: translateX(var(--record-action-menu-inline-shift, 0));
}

.record-action-menu--left .record-action-menu__panel {
  inset-inline-start: auto;
  inset-inline-end: calc(100% + var(--space-sm));
}

.record-action-menu--below .record-action-menu__panel {
  inset-inline-start: 0;
  inset-inline-end: auto;
}

.record-action-menu__close {
  position: absolute;
  inset-block-start: -1rem;
  inset-inline-end: -1rem;
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-neutral-1200);
  color: var(--color-neutral-0);
}

.record-action-menu__header {
  display: grid;
  gap: var(--space-md);
}

.record-action-menu__identity,
.record-action-menu__details,
.record-action-menu__membership-dates {
  display: grid;
}

.record-action-menu__identity {
  color: var(--color-neutral-1200);
  font-size: var(--font-size-md);
  line-height: var(--line-height-heading);
}

.record-action-menu__details {
  gap: var(--space-xs);
}

.record-action-menu__membership-dates {
  gap: var(--space-2xs);
}

.record-action-menu__title {
  overflow-wrap: anywhere;
  font-weight: var(--font-weight-bold);
}

.record-action-menu__meta {
  color: var(--color-neutral-1000);
  font-size: var(--font-size-xs);
}

.record-action-menu__meta--contact {
  overflow-wrap: anywhere;
  font-size: var(--font-size-sm);
}

.record-action-menu__actions {
  display: grid;
  margin-block-start: var(--space-lg);
  border-block-start: var(--border-width-default) solid var(--color-border-default);
}

.record-action-menu__form {
  margin: 0;
}

.record-action-menu__action {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  inline-size: 100%;
  min-block-size: 4rem;
  padding-inline: 0;
  border-block-end: var(--border-width-default) solid var(--color-border-default);
  background: transparent;
  color: var(--color-text-primary);
  font-family: var(--system-font);
  font-size: var(--font-size-sm);
  text-decoration: none;
  text-align: start;
}

.record-action-menu__action > .icon {
  flex: none;
}

.record-action-menu__actions > .record-action-menu__action:last-child,
.record-action-menu__actions > :last-child .record-action-menu__action {
  border-block-end: 0;
}

.record-action-menu__action--danger {
  color: var(--color-action-danger);
}

.record-action-menu__action:disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.record-action-menu__trigger:focus-visible,
.record-action-menu__close:focus-visible,
.record-action-menu__action:focus-visible {
  outline: 3px solid var(--color-action-primary);
  outline-offset: 3px;
}

@media (hover: hover) {
  .record-action-menu__trigger:hover {
    background: var(--color-neutral-200);
  }

  .record-action-menu__close:hover {
    background: var(--color-neutral-1200);
  }

  .record-action-menu__action:not(:disabled):hover span {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }
}