@import "../bootstrap/button-group";


.btn-group > a, .btn-group > li > a {
  margin-right: 0;
}

.btn-group {
  row-gap: 1rem;
  flex-wrap: wrap;
}

ul.btn-group {
  @include border-radius($btn-border-radius);
  margin-bottom: 0;

  // Prevent double borders when buttons are next to each other
  > li:not(:first-child) > :not(.btn-check) + .btn,
  > li:not(:first-child) > a {
    margin-left: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
  }

  // Reset rounded corners
  > li:not(:last-child):not(.before-wrap) > .btn:not(.dropdown-toggle),
  > li > .btn.dropdown-toggle-split:first-child,
  > li:not(:last-child):not(.before-wrap) > .btn-group > .btn {
    @include border-end-radius(0);
  }

  // The left radius should be 0 if the button is:
  // - the "third or more" child
  // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
  // - part of a btn-group which isn't the first child
  > li > .btn:nth-child(n + 3),
  > li > :not(.btn-check) + .btn,
  > li:not(:first-child):not(.after-wrap) > .btn {
    @include border-start-radius(0);
  }
}


.btn-group, .d-grid {

  & > :before-wrap {
    margin-right: 0;
  }

}

.button-group.d-grid {
  grid-template-columns: repeat(auto-fit, minmax(var(--bs-grid-element-min-width), 1fr));
}