// ---
// title: Button Group
// description: For buttons that are flush against each other. Also possible to include an text input.
// ---

// ### Button Group

// <div class="example html">
//   <div class="lego-button-group">
//     <button class="lego-button">Button</button>
//     <button class="lego-button">Button</button>
//     <button class="lego-button">Button</button>
//   </div>
// </div>

// ### Button Group with Active

// <div class="example html">
//   <div class="lego-button-group">
//     <button class="lego-button">Button</button>
//     <button class="lego-button lego-button--brand">Button</button>
//     <button class="lego-button">Button</button>
//   </div>
// </div>

// ### Button Group with Text Input

// <div class="example html">
//   <div class="lego-button-group">
//     <button class="lego-button">Select <span class="lego-arrow-inline--down"></span></button>
//     <input type="text" class="lego-text-input">
//   </div>
// </div>

// ### Button Group with Text Input

// <div class="example html">
//   <div class="lego-button-group">
//     <input type="text" class="lego-text-input">
//     <button class="lego-button">Button</button>
//   </div>
// </div>

// [---]

%#{$namespace}button-group,
.#{$namespace}button-group {
  @include display(flex);

  > * {
    margin-left: 0;
    border-radius: 0;

    &:not(:first-child) {
      margin-left: -1px;
    }

    &:hover,
    &:focus {
      position: relative;
    }

    &:first-child {
      border-radius: map-get($border-radius, base) 0 0 map-get($border-radius, base);
    }

    &:last-child {
      border-radius: 0 map-get($border-radius, base) map-get($border-radius, base) 0;
    }
  }

  > .#{$namespace}button--brand {
    position: relative;
  }

  > .#{$namespace}text-input {
    @include flex(1);
    width: auto;
  }

  // If inside a button group bring the colored buttons to the top so that the borders are intact.

  .#{$namespace}button--highlight,
  .#{$namespace}button--danger,
  .#{$namespace}button--brand {
    z-index: 1;
  }
}