.button {
  font-weight: 600;
}

.chevron {
  transition: transform 0.2s;
}

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

.myPagesMenu {
  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);
  z-index: 1;
  display: none;
}

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

.link:hover .arrow {
  opacity: 1;
}