/* "What's new" - release notes dialog and its settings-menu markers */
/* ================================================================= */

/* Dot on the settings gear while there are release notes the user hasn't seen */
.settings-menu-button {
  position: relative;
}

.settings-menu-unseen-dot {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;

  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  border: 2px solid var(--pg-navbar-bg, var(--bs-body-bg));

  background-color: var(--bs-danger);

  pointer-events: none;
}

.settings-menu-new-pill {
  margin-left: auto;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;

  background-color: var(--bs-danger-bg-subtle);
  color: var(--bs-danger-text-emphasis);

  font-size: 0.7rem;
  font-weight: 600;
}

/* Dialog */
dialog.release-notes-modal {
  max-width: 540px;
}

/* The footer swaps its buttons with the hidden attribute (release_notes_controller.js),
   which .pg-button's own display would otherwise override */
.release-notes-modal .modal-footer [hidden] {
  display: none;
}

.release-notes-modal__icon {
  color: var(--pg-accent, var(--bs-warning));
}

.release-notes__intro {
  margin: 0 0 0.25rem;
  color: var(--bs-secondary-color);
  font-size: 0.9rem;
}

.release-notes__release {
  padding: 0.75rem 0;
  border-bottom: var(--bs-border-width) solid var(--bs-border-color);

  /* With no intro above it, the body's own padding is gap enough */
  &:first-child {
    padding-top: 0;
  }

  &:last-of-type {
    padding-bottom: 0;
    border-bottom: none;
  }
}

.release-notes__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.6rem;
  row-gap: 0.25rem;

  cursor: pointer;
  list-style: none;

  &::-webkit-details-marker {
    display: none;
  }

  /* Chevron that turns when the release is opened */
  &::before {
    content: "\203A";
    display: inline-block;
    width: 0.6rem;
    color: var(--bs-secondary-color);
    transition: transform 0.15s ease;
  }
}

.release-notes__release[open] > .release-notes__summary::before {
  transform: rotate(90deg);
}

.release-notes__version {
  font-weight: 600;
}

.release-notes__date {
  color: var(--bs-secondary-color);
  font-size: 0.85rem;
}

.release-notes__count {
  margin-left: auto;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;

  background-color: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);

  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.release-notes__list {
  display: grid;
  gap: 0.4rem;

  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;

  & li {
    display: grid;
    grid-template-columns: 1.1rem 1fr;
    align-items: baseline;
    gap: 0.4rem;
  }
}

.release-notes__feature-icon {
  color: var(--pg-accent, var(--bs-warning));
  font-size: 0.8rem;
}

.release-notes__fix-icon {
  color: var(--bs-info-text-emphasis);
  font-size: 0.85rem;
}

.release-notes__section {
  margin-top: 0.75rem;

  & .release-notes__list {
    margin-top: 0.4rem;
  }
}

.release-notes__heading {
  margin: 0;
  color: var(--bs-secondary-color);
  font-size: 0.8rem;
  font-weight: 600;
}

.release-notes__empty {
  margin: 0.5rem 0 0;
  color: var(--bs-secondary-color);
  font-size: 0.9rem;
}

.release-notes__all-link {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  text-align: center;

  & a {
    color: var(--bs-secondary-color);
  }
}

@media (prefers-reduced-motion: reduce) {
  .release-notes__summary::before {
    transition: none;
  }
}