---
import { plainLabel } from "@/lib/utils/textConverter";
import { Icon } from "@astrojs/starlight/components";
const { dir, pagination } = Astro.locals.starlightRoute;
const { prev, next } = pagination;
const isRtl = dir === "rtl";
---
<div class="pagination-links print:hidden" dir={dir}>
{
prev && (
<a href={prev.href} rel="prev">
<Icon name={isRtl ? "right-caret" : "left-caret"} size="2rem" />
<span>
<span class="link-head"> {Astro.locals.t("page.previousLink")}</span>
<br />
<span class="link-title">{plainLabel(prev.label)}</span>
</span>
</a>
)
}
{
next && (
<a href={next.href} rel="next">
<Icon name={isRtl ? "left-caret" : "right-caret"} size="2rem" />
<span>
<span class="link-head">{Astro.locals.t("page.nextLink")}</span>
<br />
<span class="link-title">{plainLabel(next.label)}</span>
</span>
</a>
)
}
</div>
<style>
@layer starlight.core {
.pagination-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
gap: 1rem;
}
a {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.5rem;
width: 100%;
flex-basis: calc(50% - 0.5rem);
flex-grow: 1;
/* border: 1px solid var(--sl-color-gray-5);
border-radius: 0.5rem; */
padding: 1rem;
text-decoration: none;
color: var(--sl-color-gray-2);
overflow-wrap: anywhere;
align-items: end;
}
[rel="next"] {
justify-content: end;
text-align: end;
flex-direction: row-reverse;
}
a:hover {
border-color: var(--sl-color-gray-2);
}
.link-head {
font-size: 14px;
margin-bottom: 4px;
}
.link-title {
color: var(--sl-color-white);
font-size: 20px;
line-height: var(--sl-line-height-headings);
}
svg {
flex-shrink: 0;
}
}
</style>