/* Settings dropdown menu */
/* ====================== */
.settings-menu-container {
  margin-left: 0.5rem;
}

/* Gear button: tint the generic icon-toggle highlight with the navbar text
   colour. Button sizing comes from .pg-dropdown-toggle--icon in dropdown.css;
   the gear glyph itself is sized by .navbar-icon so it matches the avatar. */
.settings-menu-button {
  --pg-dd-icon-accent: var(--pg-navbar-colour);
}

.settings-menu {
  min-width: 14rem;
  /* Room for the calendar List view's longer switch labels ("Show missing ruleset
     items") on one line; max-content means the menu only grows as far as it needs. */
  max-width: 20rem;
  width: max-content;

  padding: 0;

  font-size: 0.9rem;

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

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

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

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

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

    column-gap: 0.6rem;
  }
}

/* Group wrapping the view + admin switch cards under a heading,
   mirroring the Manage group. */
.pg-toggle-group {
  display: flex;
  flex-direction: column;
  /* Same rhythm as the Manage group's links below (gap + row padding), so the
     switch rows sit as compactly as the links rather than on .pg-switch's roomier
     default padding. */
  gap: 0.15rem;

  /* Stretch each switch card (and any controller wrapper around it) full width */
  & > div {
    align-self: stretch;
  }

  & .pg-switch {
    flex: 1 1 auto;
    /* 0.05rem more than the links' 0.3rem, since the switch (1.25rem) is a little
       shorter than a link's line of text - evens the two row heights out */
    padding: 0.35rem 0.4rem;
  }
}

/* Switch rows use the reusable `.pg-switch` component (see switch.css). */

/* Manage group - links to the calendar's templates dialog and the tags screen. */
.settings-menu-item .settings-menu-manage {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.15rem;

  /* Centred like the other groups' headings, while the links stretch full width */
  & .pg-theme-picker-heading {
    align-self: center;
  }
}

.settings-menu-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;

  padding: 0.3rem 0.4rem;
  border-radius: 4px;

  color: var(--bs-body-color);
  text-decoration: none;

  &:hover,
  &:focus-visible {
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
  }
}

/* Section heading - shared by the settings and user menus */
.pg-theme-picker-heading {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bs-secondary-color);
}