.meta-language2 {
  position: relative;
  height: 100%;
}

.meta-language2__button {
  @include make-link($color-gray--darker,$color-blue)
  @extend .make-font-small-semibold;

  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  position: relative;
  min-height: 1px;
  padding-left:  ($grid-gutter-width-base / 2);
  padding-right: ($grid-gutter-width-base / 2);

  background-color: $color-gray--lighter;
  z-index: $z-index-meta-language;
}

.meta-language2__text {
  text-transform: uppercase;
}

.meta-language2__icon {
  margin-left: 12px;
  width: 16px;
  height: 16px;
}

.meta-language2__icon.is-toggled {
  transform: rotate(180deg);
}

.meta-language2__menu {
  position: relative;
  top: 0;
  right: 0;
  left: 0;

  height: auto;
  transform: translateY(-100%);
  transition: all 0.2s ease;

  background-color: $color-gray--lighter;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}

.meta-language2__menu.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}

.meta-language2__menu--invert {
  transform: translateY(0);
  top: auto;
  bottom: 100%;
}

.meta-language2__menu--invert.is-open {
  transform: translateY(-100%);
}

.meta-language2__menu__items {
  padding-bottom: 10px;
}

.meta-language2__menu__item {
  @include make-link($color-gray--darker,$color-blue)
  @extend .make-font-small-semibold;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 32px;
  text-transform: uppercase;

  position: relative;
  min-height: 1px;
  padding-left:  ($grid-gutter-width-base / 2);
  padding-right: ($grid-gutter-width-base / 2);
}

.meta-language2__menu__item--nopad-first {
  &:first-child {
    padding-left: 0;
  }
}

.meta-language2__menu__item.is-active {
  color: $color-blue;
}

.meta-language2--footer {
  .meta-language2__menu--invert {
    .meta-language2__menu__items {
      padding: 0;

      @include media-breakpoint-up(md) {
        padding-top: 10px;
      }
    }
  }

  // FIXME: Make this mobile first!
  @include media-breakpoint-down(sm) {
    .meta-language2__button {
      display: none;
    }

    .meta-language2__menu {
      position: static;
      opacity: 1;
      transform: none;
      pointer-events: auto;
    }

    .meta-language2__menu__item {
      display: inline;

      &:first-child {
        padding-left: 0;
      }
    }
  }
}