.myPagesMenu {
  position: relative;
}

.chevron {
  display: none;
  transition: transform 0.2s;
}

.chevron.isExpanded {
  transform: rotate(180deg);
}

.userName {
  display: none;
  font-weight: 600;
  color: var(--Base-Text-High-contrast);
}

.dropdown {
  position: absolute;
  top: 46px;
  right: 0;
  background-color: var(--Base-Surface-Primary-light-Normal);
  padding: var(--Spacing-x2) var(--Spacing-x4);
  border-radius: var(--Corner-radius-Large);
  box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
  min-width: 20rem;
  z-index: 1;
  display: none;
}

/* Triangle above dropdown */
.dropdown::before {
  content: "";
  position: absolute;
  top: -1.25rem;
  right: 2.4rem;
  transform: rotate(180deg);
  border-width: 0.75rem;
  border-style: solid;
  border-color: var(--Base-Surface-Primary-light-Normal) transparent transparent
    transparent;
}

.dropdown.isExpanded {
  display: block;
}

.friendTypeWrapper {
  padding: 0 var(--Spacing-x1) var(--Spacing-x2);
  font-weight: 400;
  color: var(--UI-Text-Medium-contrast);
}
.friendType {
  font-family: var(--typography-Title-5-fontFamily);
  letter-spacing: var(--typography-Title-5-letterSpacing);
  font-size: var(--typography-Caption-Bold-fontSize);
  text-transform: uppercase;
}

.friendType::after {
  content: " · ";
  display: inline;
  padding: 0 var(--Spacing-x-half);
}

.groups,
.menuItems {
  list-style: none;
}

.group {
  padding: var(--Spacing-x2) 0;
  border-top: 1px solid var(--Base-Border-Subtle);
}

.group:last-child {
  padding-bottom: 0;
}

.arrow {
  opacity: 0;
}

.loginLink {
  display: flex;
  align-items: center;
  gap: var(--Spacing-x1);
}

@media screen and (min-width: 768px) {
  .userName,
  .chevron {
    display: initial;
  }
}