.user-menu-container {
  margin-left: 0.5rem;
}

/* Avatar button: tint the generic icon-toggle highlight with the navbar text
   colour. Sizing (height + padding) comes from .pg-dropdown-toggle--icon and
   the --caret variant in dropdown.css, so it matches the settings button. */
.user-menu-button {
  --pg-dd-icon-accent: var(--pg-navbar-color);
}

.user-menu {
  min-width: 14rem;
  max-width: none;
  width: max-content;

  padding: 0;

  font-size: 0.9rem;

  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);

  overflow: hidden;

  @media (width <=576px) {
    min-width: min(14rem, calc(100vw - 2rem));
    max-width: calc(100vw - 1rem);
  }
}

.user-menu-item {
  padding: 0.7rem 0.6rem;

  border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);

  &:hover {
    background-color: color-mix(in srgb, var(--pg-accent) 50%, var(--pg-accent-contrast));
  }

  &:last-child {
    border-bottom: none;
  }

  & a {
    display: block;
    color: var(--pg-accent);
    text-decoration: none;
  }

  /* Sign Out is a button_to form so it works without JS; make it read as the
     plain menu links do. */
  & form {
    margin: 0;
  }

  & .user-menu-signout {
    display: block;
    width: 100%;
    padding: 0;

    background: none;
    border: none;
    text-align: start;

    font: inherit;
    color: var(--pg-accent);
    cursor: pointer;
  }

  & div {
    display: flex;
    align-items: center;

    column-gap: 0.6rem;
  }
}

/* Signed-in identity caption. Not clickable — sits above the actionable items,
   separated by the shared .user-menu-item bottom border. */
.user-menu-item--header {
  padding-bottom: 0.4rem;
  cursor: default;

  &:hover {
    background-color: transparent;
  }

  & .pg-theme-picker-heading {
    display: block;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
  }
}