.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;
  }

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

    column-gap: 0.6rem;
  }
}