// Inline sibling
//
// An element that needs to appear inline with the content that follows.
//
// Markup: inline-sibling.hbs
//
// Style guide: components.inline-sibling

.inline-sibling,
%inline-sibling {
  @include margin-right(.75);
  display: inline;

  @include rtl() {
    @include margin-left(.75);
    margin-right: 0;
  }

  // All of the children of the element need to be inline as well.
  &__child,
  * {
    display: inline;
  }

  // The next element (and its first-child element, if the markup is nested)
  // needs to be inline.
  &__adjacent,
  + *,
  + * > *:first-child {
    display: inline;
  }
}
