_footer.sass

// This file contains the styles used for stylizing the footer that's shown
// below the content.

footer
  font-size: var(--font-size--small)
  display: flex
  flex-direction: column

  margin-top: 2rem

// Bottom of page information
.bottom-of-page
  display: flex
  align-items: center
  justify-content: space-between

  margin-top: 1rem
  padding-top: 1rem
  padding-bottom: 1rem

  color: var(--color-foreground-secondary)
  border-top: 1px solid var(--color-background-border)

  line-height: 1.5

  @media (max-width: $content-width)
    text-align: center
    flex-direction: column-reverse
    gap: 0.25rem

  .left-details
    font-size: var(--font-size--small)

  .right-details
    display: flex
    flex-direction: column
    gap: 0.25rem
    text-align: right

  .icons
    display: flex
    justify-content: flex-end
    gap: 0.25rem
    font-size: 1rem

    a
      text-decoration: none

    svg,
    img
      font-size: 1.125rem
      height: 1em
      width: 1em

// Next/Prev page information
.related-pages
  a
    display: flex
    align-items: center

    text-decoration: none
    &:hover .page-info .title
      text-decoration: underline
      color: var(--color-link)
      text-decoration-color: var(--color-link-underline)

    svg.furo-related-icon,
    svg.furo-related-icon > use
      flex-shrink: 0

      color: var(--color-foreground-border)

      width: 0.75rem
      height: 0.75rem
      margin: 0 0.5rem

    &.next-page
      max-width: 50%

      float: right
      clear: right
      text-align: right

    &.prev-page
      max-width: 50%

      float: left
      clear: left

      svg
        transform: rotate(180deg)

.page-info
  display: flex
  flex-direction: column
  overflow-wrap: anywhere

  .next-page &
    align-items: flex-end

  .context
    display: flex
    align-items: center

    padding-bottom: 0.1rem

    color: var(--color-foreground-muted)
    font-size: var(--font-size--small)
    text-decoration: none