<template>
  <footer class="footer">
    <div class="footer__content">
      <slot></slot>
    </div>
  </footer>
</template>

<style lang="scss">
.footer {
  background-color: var(--color-footer-background);
  color: var(--color-footer-text);
  margin: var(--navigation-cutout);
  padding: 1px 0;

  &__content {
    text-align: center;
    max-width: var(--textblock-max-width);
    margin: auto;
    padding: var(--textblock-padding);
  }

  a {
    color: var(--color-footer-link-text);
    box-shadow: inset 0 calc(var(--link-inset-box-shadow) * -0.125) 0 0
      var(--color-footer-link-text-underline);

    &:hover {
      color: var(--color-footer-link-text-hover);
      box-shadow: inset 0 calc(var(--link-inset-box-shadow) * -1) 0 0
        var(--color-footer-link-text-underline);
    }
  }
}
</style>
