<commit_before>/*doc
---
title: Button Group and Toolbar
name: button-groups
category: Form
---

Simple button group:

```html_example
<div class="btn-group" role="group">
  <button type="button" class="btn">Left</button>
  <button type="button" class="btn">Center</button>
  <button type="button" class="btn">Right</button>
</div>
```

Button toolbars grouping multiple button groups together:

```html_example
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group" role="group">
    <div class="btn-group" role="group">
      <button type="button" class="btn">1</button>
      <button type="button" class="btn">2</button>
      <button type="button" class="btn">3</button>
    </div>
  </div>
  <div class="btn-group" role="group">
    <div class="btn-group" role="group">
      <button type="button" class="btn">4</button>
      <button type="button" class="btn">5</button>
    </div>
  </div>
  <div class="btn-group" role="group">
    <div class="btn-group" role="group">
      <button type="button" class="btn">6</button>
    </div>
  </div>
</div>
```

Vertical button group:

```html_example
<div class="btn-group btn-group--vertical" role="group">
  <button type="button" class="btn">Top</button>
  <button type="button" class="btn">Center</button>
  <button type="button" class="btn">Bottom</button>
</div>
```

*/

@custom-selector :--btn-group-nested
  .btn + .btn,
  .btn + .btn-group,
  .btn-group + .btn,
  .btn-group + .btn-group;

.btn-group {
  display: flex;
  flex-wrap: nowrap;
}

.btn-group > .btn:first-child:not(:last-child, .dropdown-toggle) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group > .btn:first-child {
  margin-left: 0;
}

.btn-group > .btn:not(:first-child, :last-child, .dropdown-toggle) {
  border-radius: 0;
}

.btn-group > :--btn-group-nested {
  margin-left: -1px;
}

.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group--vertical {
  flex-direction: column;
}

.btn-group--vertical > .btn:first-child:not(:last-child, .dropdown-toggle) {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group--vertical > .btn:not(:first-child) {
  box-shadow: none;
}

.btn-group--vertical > .btn:--button-active {
  box-shadow: 0  1px 10px rgba(  0,   0,   0, 0.2) inset,
              0 -1px  0   rgba(255, 255, 255, 0.2) inset;
}

.btn-group--vertical > .btn:last-child:--button-active {
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.2) inset;
}

.btn-group--vertical > .btn:not(:last-child) {
  border-bottom-color: transparent;
}

.btn-group--vertical > :--btn-group-nested {
  margin-top: -1px;
  margin-left: 0;
}

.btn-group--vertical > .btn:last-child:not(:first-child) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 4px;
}

.btn-group--vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.btn-toolbar {
  display: flex;
  margin-left: -5px;
}

.btn-toolbar > :matches(.btn, .btn-group, .input-group) {
  margin-left: 5px;
}
<commit_msg>Fix last-child vertical button-group btn<commit_after>/*doc
---
title: Button Group and Toolbar
name: button-groups
category: Form
---

Simple button group:

```html_example
<div class="btn-group" role="group">
  <button type="button" class="btn">Left</button>
  <button type="button" class="btn">Center</button>
  <button type="button" class="btn">Right</button>
</div>
```

Button toolbars grouping multiple button groups together:

```html_example
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group" role="group">
    <div class="btn-group" role="group">
      <button type="button" class="btn">1</button>
      <button type="button" class="btn">2</button>
      <button type="button" class="btn">3</button>
    </div>
  </div>
  <div class="btn-group" role="group">
    <div class="btn-group" role="group">
      <button type="button" class="btn">4</button>
      <button type="button" class="btn">5</button>
    </div>
  </div>
  <div class="btn-group" role="group">
    <div class="btn-group" role="group">
      <button type="button" class="btn">6</button>
    </div>
  </div>
</div>
```

Vertical button group:

```html_example
<div class="btn-group btn-group--vertical" role="group">
  <button type="button" class="btn">Top</button>
  <button type="button" class="btn">Center</button>
  <button type="button" class="btn">Bottom</button>
</div>
```

*/

@custom-selector :--btn-group-nested
  .btn + .btn,
  .btn + .btn-group,
  .btn-group + .btn,
  .btn-group + .btn-group;

.btn-group {
  display: flex;
  flex-wrap: nowrap;
}

.btn-group > .btn:first-child:not(:last-child, .dropdown-toggle) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group > .btn:first-child {
  margin-left: 0;
}

.btn-group > .btn:not(:first-child, :last-child, .dropdown-toggle) {
  border-radius: 0;
}

.btn-group > :--btn-group-nested {
  margin-left: -1px;
}

.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group--vertical {
  flex-direction: column;
}

.btn-group--vertical > .btn:first-child:not(:last-child, .dropdown-toggle) {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group--vertical > .btn:not(:first-child) {
  box-shadow: none;
}

.btn-group--vertical > .btn:--button-active,
.btn-group--vertical > .btn:last-child:--button-active {
  box-shadow: 0  1px 10px rgba(  0,   0,   0, 0.2) inset,
              0 -1px  0   rgba(255, 255, 255, 0.2) inset;
}

.btn-group--vertical > .btn:not(:last-child) {
  border-bottom-color: transparent;
}

.btn-group--vertical > :--btn-group-nested {
  margin-top: -1px;
  margin-left: 0;
}

.btn-group--vertical > .btn:last-child:not(:first-child) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 4px;
}

.btn-group--vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.btn-toolbar {
  display: flex;
  margin-left: -5px;
}

.btn-toolbar > :matches(.btn, .btn-group, .input-group) {
  margin-left: 5px;
}

{'fraction_non_alphanumeric': 0.20409759149202378, 'fraction_numerical': 0.017203628401626526, 'mean_word_length': 3.541903409090909, 'pattern_counts': {'":': 0, '<': 87, '<?xml version=': 0, '>': 119, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4194720', 'n_tokens_mistral': 2495, 'n_tokens_neox': 2392, 'n_words': 447}