@import "../../../scss/variables";
@import "../../../scss/breakpoints.mixins";
@import "../../../scss/typo.mixins";
@import "../../../scss/grid.mixins";

.footer-languages {
  padding: 10px 0;

  .footer-lower & {
    display: flex;
  }

  .footer-upper .footer-social + &,
  .footer-upper .footer-legal + & {
    display: flex;
  }

  .footer-upper & {
    @include media-breakpoint-up(smallDesktop) {
      padding: 0;
    }
  }

  @include media-breakpoint-up(smallDesktop) {
    @include typo-14;
  }
}

.footer-languages__title {
  display: none;
  font-weight: bold;
  text-transform: uppercase;

  .footer-upper &,
  .footer-lower & {
    margin-right: 20px;

    @include media-breakpoint-up(smallDesktop) {
      display: block;
    }
  }

  .footer-upper & {
    @include media-breakpoint-up(smallDesktop) {
      margin-bottom: 15px;
      font-size: 16px;
    }
  }

  .footer-upper--light & {
    @include media-breakpoint-up(smallDesktop) {
      margin-bottom: 0;
      font-size: inherit;
    }
  }
}

.footer-languages__content {
  display: flex;
  flex-wrap: wrap; // extra small devices or multi languages
  justify-content: center;
}