---
import { Container } from './container';
---

<Container>
  <section class="wrapper">
    <p class="text">
      Enjoy Moodist?{' '}
      <a
        href="https://buymeacoffee.com/remvze"
        rel="noreferrer"
        target="_blank"
      >
        Support with a donation!
      </a>
    </p>
  </section>
</Container>

<style>
  .wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px;
    font-size: var(--font-xsm);
    color: var(--color-foreground-subtle);

    &::after {
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 80%;
      height: 1px;
      content: '';
      background: linear-gradient(
        90deg,
        transparent,
        var(--color-neutral-400),
        transparent
      );
      transform: translateX(-50%);
    }

    & .text {
      text-align: center;

      & a {
        font-weight: 500;
        color: var(--color-foreground);
        text-decoration: none;
      }
    }
  }
</style>