// ============================================================================
// :: Languages
// ============================================================================
/**
 * Contextual component used to display a list of the available languages
 */

// ============================================================================
// :: Root
// ============================================================================
.m-languages {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  padding-left: 0;

  list-style-type: none;
}

// ============================================================================
// :: Elements
// ============================================================================
.m-languages__item {
  opacity: 0.5;

  transition: opacity 0.3s ease-in-out;

  &:first-child {
    margin-right: 2rem;

    @include respond-to($breakpoint-tablet-default) {
      margin-right: 1rem;
    }
  }

  &:hover {
    opacity: 1;
  }
}

.m-languages__link {
  @extend %__h3-default;

  text-decoration: none;

  color: $text-color-white;
}

// ============================================================================
// :: Modifiers
// ============================================================================
.m-languages--inverted {

  .m-languages__link {
    color: $text-color-base;
  }
}

// ============================================================================
// :: States
// ============================================================================
.m-languages__item {

  &.is-active {
    opacity: 1;
  }
}