/* Scope links menu */
/* ================ */
.event-scope-menu {
  flex-grow: 1;

  display: flex;
  align-items: center;
  column-gap: 0.5rem;

  /* On mobile, size to content so the adjacent search bar gets the space */
  @media (width <=576px) {
    flex-grow: 0;
  }
}

.event-scope-menu__label {
  display: inline-flex;
  align-items: center;

  font-size: var(--pg-fs-small);
}

/* "Show:" text on wider screens, a compact filter icon on mobile */
.event-scope-menu__label-icon {
  display: none;
}

@media (width <=576px) {
  .event-scope-menu__label-icon {
    display: inline-block;
    font-size: 1rem;
  }

  .event-scope-menu__label-text {
    display: none;
  }
}

.event-scope-menu__dropdown {
  display: inline-block;

  font-size: var(--pg-fs-small);
}

.event-scope-menu__dropdown-button {
  width: 100%;

  /* Keep the scope title (e.g. "All Upcoming") on a single line */
  white-space: nowrap;
}

.event-scope-menu__dropdown-menu {
  padding: 0;
  width: 100%;
}

.event-scope-menu__dropdown-item {
  border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);

  font-size: var(--pg-fs-small);

  line-height: 2.5;

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

  &:hover {
    background-color: var(--bs-warning-bg-subtle);
  }

  & a {
    width: 100%;
    display: inline-block;

    padding-left: 1rem;
    padding-right: 1rem;

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

    &.active {
      font-weight: 600;
    }
  }
}