/*
 * The "What's new" link and its dot (shared/_whats_new): in the top bar's
 * link group from 1024px, and at the top of the sidebar, where a phone sees
 * it. The dot is a small accent disc after the words, shown by the
 * `whats-new` controller removing its `hidden`.
 */
@layer components {
  .whats-new {
    display: inline-flex;
    align-items: center;
  }

  .whats-new__dot {
    display: inline-block;
    inline-size: 0.375rem;
    block-size: 0.375rem;
    margin-inline-start: var(--space-3xs);
    border-radius: 50%;
    background-color: var(--color-accent);
    vertical-align: middle;
  }

  .sidebar-whats-new {
    padding: var(--space-sm) var(--space-lg) 0;
    font-size: var(--text-ui);
  }
}