Introduce more standard next and prev page buttons (#6572)

Updates the previous and next page buttons to be consistent with
docs.flutter.dev and more consistent with other documentation sites.

**After:**
<img width="440" alt="Screenshot of previous and next page buttons after
the change"
src="https://github.com/user-attachments/assets/4b40354b-c24a-4b71-98e5-eade7745d108"
/>


**Before:**
<img width="440" alt="Screenshot of previous and next page buttons
before the change"
src="https://github.com/user-attachments/assets/e22e99b3-48e4-4070-bd69-a3826bd67036"
/>

**Staged:**
https://dart-dev--pr6572-feat-next-prev-buttons-gz3jkrbt.web.app/language/functions#external

Author: parlough

src/_includes/prev-next.html

@@ -1,16 +1,22 @@
-{% if nextpage.url or prevpage.url %}
-<nav id="prev-next">
-  <ul>
-    <li class="previous">
-      {% if prevpage.url %}
-        <a href="{{prevpage.url}}">&lang;&nbsp;&nbsp;{{prevpage.title}}</a>
-      {% endif %}
-    </li>
-    <li class="next">
-      {% if nextpage.url %}
-        <a href="{{nextpage.url}}">{{nextpage.title}}&nbsp;&nbsp;&rang;</a>
-      {% endif %}
-    </li>
-  </ul>
+{% if nextpage or prevpage -%}
+<nav id="site-prev-next">
+  {% if prevpage.url -%}
+  <a class="prev" href="{{ prevpage.url }}">
+    <span class="material-symbols" aria-hidden="true">chevron_left</span>
+    <div>
+      <span class="prev-next-subtitle" aria-label="Previous page: ">Previous</span>
+      <span class="prev-next-title">{{ prevpage.title}}</span>
+    </div>
+  </a>
+  {% endif -%}
+  {% if nextpage.url -%}
+  <a class="next" href="{{ nextpage.url }}">
+    <div>
+      <span class="prev-next-subtitle" aria-label="Next page: ">Next</span>
+      <span class="prev-next-title">{{ nextpage.title}}</span>
+    </div>
+    <span class="material-symbols" aria-hidden="true">chevron_right</span>
+  </a>
+  {% endif -%}
 </nav>
-{% endif %}
+{% endif -%}

src/_sass/_site.scss

@@ -24,8 +24,8 @@
 @use 'components/header';
 @use 'components/linter-rules';
 @use 'components/misc';
+@use 'components/next-prev-nav';
 @use 'components/os-tabs';
-@use 'components/pagination';
 @use 'components/search';
 @use 'components/sidenav';
 @use 'components/tags';

src/_sass/components/_next-prev-nav.scss

@@ -0,0 +1,66 @@
+@use '../base/mixins';
+@use '../base/variables' as *;
+
+#site-prev-next {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-block-end: 1rem;
+  font-family: $site-font-family-alt;
+
+  .prev {
+    text-align: left;
+    justify-content: flex-start;
+  }
+
+  .next {
+    text-align: right;
+    justify-content: flex-end;
+    margin-left: auto;
+  }
+
+  @media (min-width: 576px) {
+    flex-wrap: nowrap;
+
+    .prev, .next {
+      max-width: 50%;
+    }
+  }
+
+  a {
+    overflow-x: hidden;
+    flex-basis: 100%;
+
+    text-decoration: none;
+    color: $site-color-body;
+    border: 1px solid rgba(194, 198, 214, .75);
+    border-radius: 0.25rem;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0.5rem;
+    min-height: 100%;
+
+    > div {
+      display: flex;
+      flex-direction: column;
+      padding: 0.5rem;
+
+      .prev-next-subtitle {
+        font-size: 0.75rem;
+        line-height: 0.75rem;
+      }
+    }
+
+    &:hover {
+      @include mixins.interaction-style(3%);
+    }
+
+    &:active {
+      @include mixins.interaction-style(5%);
+    }
+  }
+}