<template>
  <footer class="layout-footer _container">
    <LayoutExtraLinks class="layout-footer__links" />

    <p class="layout-footer__disclaimer">{{ t('disclaimer') }}</p>

    <div class="layout-footer__footer">
      <LayoutLogo class="layout-footer__logo" />
      <LayoutFooterLanguage />
      <p class="layout-footer__copyright">{{ copyrightText }}</p>
    </div>
  </footer>
</template>

<script setup lang="ts">
const copyrightText = useAppConfig().copyrightText;

const { t } = useI18n();
</script>

<style lang="scss">
$breakpoint-footer: sm;

.layout-footer {
  display: grid;
  row-gap: 24px;
  padding-bottom: 24px;
  background-color: $footer-bg;
  color: $footer-text;

  @include from-br($breakpoint-footer) {
    padding-bottom: 72px;
    padding-inline: 24px;
  }
}

.layout-footer__footer {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  align-items: center;

  @include from-br($breakpoint-footer) {
    flex-direction: row;
    justify-content: space-between;
    padding-inline: 24px;
  }
}

.layout-footer__copyright {
  @include font-xs;

  color: $footer-copyright;
  text-align: center;
}

.layout-footer__disclaimer {
  @include font-xs;

  color: $footer-disclaimer;
  text-align: center;

  @include from-br(sm) {
    max-width: 80%;
    margin: 0 auto;
  }
}

.layout-footer__language {
  @include from-br($breakpoint-footer) {
    margin: 0 auto;
  }
}

.layout-footer__links.layout-extra-links {
  display: flex;
  flex-wrap: wrap;
  padding-top: 32px;
  border-top: 1px solid $footer-links-border;
}

.layout-footer__logo img {
  width: 119px;
  height: 20px;
}
</style>
