/* Group Settings interaction fixes.
   Keep the drawer visually stable when switching tabs and make member actions readable. */

/* renderDrawer() replaces the drawer DOM on every tab switch. The original
   entrance animation therefore replayed on each click and looked like the
   drawer closed and reopened. Keep the mounted drawer stationary. */
.group-settings-drawer-root.is-open .group-settings-drawer {
  animation: none !important;
  transform: translateX(0) !important;
}

#groupSettingsDrawerRoot .group-settings-member-actions {
  align-items: center;
  gap: 8px;
}

#groupSettingsDrawerRoot .group-settings-role-action,
#groupSettingsDrawerRoot .group-settings-remove-action {
  display: inline-flex;
  min-block-size: 34px;
  align-items: center;
  justify-content: center;
  padding: 6px 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: none;
}

#groupSettingsDrawerRoot .group-settings-role-action.is-promote {
  border-color: #a6f4c5;
  background: #ecfdf3;
  color: #067647;
}

#groupSettingsDrawerRoot .group-settings-role-action.is-promote:hover {
  background: #d1fadf;
  color: #05603a;
}

#groupSettingsDrawerRoot .group-settings-role-action.is-demote {
  border-color: #d0d5dd;
  background: #f9fafb;
  color: #344054;
}

#groupSettingsDrawerRoot .group-settings-role-action.is-demote:hover {
  background: #f2f4f7;
  color: #1d2939;
}

#groupSettingsDrawerRoot .group-settings-remove-action {
  border-color: #fecdca;
  background: #fff1f0;
  color: #b42318;
}

#groupSettingsDrawerRoot .group-settings-remove-action:hover {
  background: #fee4e2;
  color: #912018;
}

#groupSettingsDrawerRoot .group-settings-role-action:focus-visible,
#groupSettingsDrawerRoot .group-settings-remove-action:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 22%, transparent);
  outline-offset: 2px;
}