/*doc
---
title: Button dropdowns
name: button_dropdowns
category: Components
---

```html_example_table
<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" disabled class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Disabled <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>


<div class="btn-group">
  <button type="button" class="btn btn-split btn-primary">Primary</button>
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-split btn-primary">Action</button>
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-split btn-default">Action</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<div class="btn-group no-ui">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
    <span class="fa fa-ellipsis-h" />
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
```
*/


.btn-group {

  > .btn {

    + .dropdown-toggle {
      padding-left: 16px;
      padding-right: $gutter-horizontal-x2;
    }
  }

  .btn-split {
    padding-right: $gutter-horizontal;
  }

  > .btn-primary {

    &.btn-split {
      border-right-color: $white;
    }

    + .dropdown-toggle {
      border-left-color: $white;
    }
  }

  &.no-ui {
    button {
      background-color: transparent;
      border: 0;
      color: $text-color;
      padding: 0 4px;
    }

    .dropdown-menu {
      margin-right: -$gutter-horizontal-x2;
      padding: 0;
      right: 0;

      li {
        margin: 10px 0;
      }
    }
  }
}

.btn-group.open {

  .dropdown-toggle {
    box-shadow: none;
  }

  > .btn-default.dropdown-toggle {
    background: $btn-default-bg;
    border-color: $btn-default-border-active;
    color: $btn-default-color-active;
  }

  > .btn-primary.dropdown-toggle {
    background: $btn-primary-bg-active;
    border-color: $btn-primary-bg-active;
  }

  >.btn-primary.btn-split {

    +.dropdown-toggle {
      border-left-color: $white;
    }
  }
}

.dropdown-menu {
  @include box-shadow($box-shadow-style);

  border-radius: 6px;
  border: 1px solid $btn-default-border;
  color: $gray-light;
  left: auto;
  margin-top: 15px;
  padding-bottom: 20px;
  padding-top: 20px;
  right: -5px;

  > li {

    > a {
      color: $gray-light;
      padding: 5px 25px;
    }
  }

  &:before {
    border-color: transparent;
    border-bottom-color: $btn-default-border;
    border-style: solid;
    border-top-width: 0;
    border-width: 11px;
    content: '';
    display: block;
    height: 0;
    margin-left: -11px;
    position: absolute;
    right: 18px;
    top: -22px;
    width: 0;
  }

  &:after {
    border-color: transparent;
    border-bottom-color: #fff;
    border-style: solid;
    border-width: 10px;
    border-top-width: 0;
    content: '';
    display: block;
    height: 0;
    position: absolute;
    right: 19px;
    top: -10px;
    width: 0;
  }
}

.btn-primary {

  &:disabled {
    @extend .btn-default;
  }
}