/*
 * What the viewer can do with a person (specs/005 FR-052 to FR-055): the profile page,
 * the profile drawer and the friends rail's ⋯ menu share one partial and these rules.
 */

.relationship-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.relationship-actions__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.relationship-actions__main > form {
  display: contents;
}

.relationship-actions .btn {
  width: auto;
}

.relationship-actions__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-comment);
}

.relationship-actions__menu {
  position: relative;
}

.relationship-actions__menu > summary {
  list-style: none;
}

.relationship-actions__menu > summary::-webkit-details-marker {
  display: none;
}

/* The menus open under their button, wide enough for a server name. */
.relationship-actions__menu .meet-menu__list {
  top: calc(100% + var(--space-1));
  right: auto;
  left: 0;
  min-width: 200px;
}

.relationship-actions__more .meet-menu__list {
  right: 0;
  left: auto;
}

.meet-menu__button--danger {
  color: var(--color-red);
}

/* The friends rail's ⋯ menu: above the row's stretched chat link. */
.rail-entry__menu {
  position: relative;
  z-index: 2;
  margin-left: auto;
}

/* Open, it lies over the rows below. */
.rail-entry__menu[open] {
  z-index: 20;
}

.rail-entry__menu > summary {
  list-style: none;
  width: auto;
  opacity: 0.6;
}

.rail-entry__menu > summary::-webkit-details-marker {
  display: none;
}

.rail-entry:hover .rail-entry__menu > summary,
.rail-entry__menu[open] > summary {
  opacity: 1;
}

.rail-entry__menu-panel {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  z-index: 10;
  width: max-content;
  max-width: min(320px, calc(100vw - var(--space-6)));
  padding: var(--space-2);
  background-color: var(--color-card-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-standard);
  box-shadow: var(--shadow-card);
}

.rail-entry__menu:not([open]) .rail-entry__menu-panel {
  display: none;
}

.rail-entry__menu-panel .relationship-actions__menu .meet-menu__list {
  position: static;
  margin-top: var(--space-1);
}