@use 'pix-design-tokens/breakpoints';
@use 'pix-design-tokens/typography';
@use '../globals/layout';

#footer {
  @extend %global-container;

  display: flex;
  gap: var(--pix-spacing-4x);
  align-items: flex-start;
  justify-content: space-between;
  padding-block: var(--pix-spacing-12x) var(--pix-spacing-6x);
  color: var(--pix-neutral-500);

  @include breakpoints.device-is('mobile') {
    flex-direction: column;
  }
}

.footer__logos {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 1em;
  align-items: center;

  &--french-republic-logo {
    height: 3.375rem;
  }

  &--pix-logo {
    height: 3rem;
  }

  .copyrights {
    @extend %pix-body-xs;

    flex: 100%;
  }
}

// Footer links
.footer-links__list {
  &--small {
    @extend %pix-body-s;
  }

  &--extra-small {
    @extend %pix-body-xs;

    a {
      text-decoration: underline;
    }
  }

  li {
    display: inline-block;
    padding-block: 0.25em;
    margin-inline: 0 2ch;
  }

  a {
    &:hover,
    &:focus {
      color: var(--pix-primary-500);
    }
  }
}

.footer-links__list--align-right {
  @include breakpoints.device-is('tablet') {
    text-align: right;
  }
}
