//
// Extension to Button groups so we can use forms as buttons
// --------------------------------------------------
.btn-group {
    .form-as-button,
    .form-as-button .button.group-item {

        // Prevent double borders when buttons are next to each other
        // The left radius should be 0 if not first
        &:not(:first-of-type),
        &:not(.first) {
          .btn {
            margin-left: -$btn-border-width;
            @include border-start-radius(0);

            // when the class is on the button and not the form
            &.last {
              @include border-end-radius($btn-border-radius-sm);
            }
          }
        }

        // Reset rounded corners
        &:not(:last-of-type),
        &:not(.last) {
          .btn {
            @include border-end-radius(0);
          }
        }
    }

    // submitted text
    .text-small {
      padding-top: calc($btn-border-width + $btn-padding-y-sm);
      padding-bottom: calc($btn-border-width + $btn-padding-y-sm);
    }
}

// Btn-group works when there are multiple elements eg a, form, button
.group-item:not(:first-child),
.btn-group-item:not(:first-child) {
    margin-left: -$btn-border-width;
}

.form-as-button.btn-first {
    margin-right: -$btn-border-width;
}

.btn-group > .btn-group-first.btn-group-last {
    display: inline-block;
    margin-left: -0.25rem; // -4px;
    &.webservices {
        margin-left: 0;
    }
}

.btn-group {
    z-index: 3;
}
// except add pages to collections need no margin-left
.pagesavailable .btn-group {
    margin-left: 0;
}

// Chrome bug - flex container doesn't work on fieldset tag
fieldset.btn-group {
  display: block;
}

// Used to stop dropdown being covered by the button
.controls .btn-group {
    z-index: 1;
}

// Removes weird text node between buttons on admin/users/suspended.php
.pieform-fieldset.btn-group {
    font-size: 0;
}

// plugin admin buttons
.extensions {
    .card-header .btn-group-top {
        margin-top: -$spacing-base - $btn-border-width;
        margin-bottom: 0;
    }
    .list-group-item .btn-group-top {
      form {
        .btn {
          border-bottom-left-radius: $btn-border-radius-sm;
          border-bottom-right-radius: $btn-border-radius-sm;
        }
      }
      .btn + form {
        .btn {
          border-bottom-left-radius: 0;
        }
      }
    }
}

h1 ~ div > .btn-group-top,
h2 ~ div > .btn-group-top,
h3 ~ div > .btn-group-top,
h4 ~ div > .btn-group-top,
h5 ~ div > .btn-group-top,
h6 ~ div > .btn-group-top,
p ~ div > .btn-group-top,
.page-header ~ div.btn-group-top,
.nav-tabs +  div.btn-group-top {
    margin-top: -1.25rem; // -20px;
    margin-left: -100%;

    @include media-breakpoint-down(lg) {
        margin: 0 0 $spacing-base 0;
        width: 100%;
        float: none;
    }

    .btn-group .btn,
    .form-as-button button,
    .btn {
        @include border-top-radius(0);
        border-top: 0;

        @include media-breakpoint-down(lg) {
            margin-bottom: $spacing-xs;
            margin-left: $btn-border-width;
            margin-right: $btn-border-width;
            width: 100%;
            border-radius: $btn-border-radius-sm !important;
            border-right-width: $btn-border-width;
            border-top: $btn-border-width solid $btn-secondary-border;
        }

        .btn {
            margin-bottom: 0;
        }
    }

    // margins when button groups separate in smaller widths
    @include media-breakpoint-down(lg) {
      .form-as-button {
        float: none !important;
        margin-right: calc($btn-border-width + $btn-border-width);
      }
      &.btn-group > .btn:not(:first-child),
      &.btn-group .form-as-button:not(.first) .btn {
        margin-left: $btn-border-width;
        margin-right: $btn-border-width;
      }
    }
}

.btn-group-top {
    position: relative;
    z-index: 4;
    @include media-breakpoint-up(md) {
        float: right;

        .btn-group-top {
            margin: 0;
        }
    }
}

.nav-tabs +  div.btn-group-top{
    margin-top: 0;
}

td.btn-group {
    min-width: 18.75rem; // 300px;
}

// Often the same template is used to render buttons at the top of the page and
// in a list group. cf. groups table/groups
.list-group,
.card-header {
    .btn-group-top {
        @include clearfix;
        margin-top: -(calc($list-group-item-padding-x - $btn-border-width - $list-group-border-width)); // -13px;
        text-align: right;
        float: right;

        .btn-top-right {
            margin: 0; // negate nested margin
        }

        .btn {
            @include border-top-radius(0);
        }
    }
}

// annotation modal
.commentlist,
.feedback.modal {
    .btn-group-top.comment-item-buttons {
        margin-top: -(calc($list-group-item-padding-x - $btn-border-width - $list-group-border-width)); // -13px;
    }
}

// Edit page configure buttons
.card-secondary .card-header .blockinstance-controls .btn-group-top {
    position: absolute;
    top: $card-spacer-y;
    right: $card-spacer-x;
    margin-top: 0px;
    .btn {
        border-radius: $btn-border-radius-sm;
        border-color: transparent;
        background: scale-color($btn-secondary-bg, $lightness: 20%);
        &:hover,
        &:focus {
            background: $btn-secondary-bg;
        }
        &:first-child {
            border-radius: $btn-border-radius-sm 0 0 $btn-border-radius-sm;
        }
        &:last-child {
            border-radius: 0 $btn-border-radius-sm $btn-border-radius-sm 0;
        }
    }
}

// group action buttons on a list-group need to be small but not on group homepage
.list-group-item .btn-action-list {
    .btn {
        padding: $btn-padding-y-sm $btn-padding-x-sm;
        font-size: $btn-font-size-sm;
    }
}

// admininister institutions plugin button
.controls .btn-group .btn.first {
    border-top-left-radius: $btn-border-radius-sm;
    border-bottom-left-radius: $btn-border-radius-sm;
}

// custom edit group description container need border bottom removed as fieldset under
#editgroup_description_container {
  border-bottom: 0;
}

// custom delete annotation button isn't inheriting btn group border radius
.comment-item.list-group-item .btn-group-top.comment-item-buttons {
  button.btn {
    ~ form.delete-comment .btn {
      border-bottom-left-radius: 0;
    }
  }
  form.delete-comment .btn {
    border-bottom-left-radius: $btn-border-radius-sm;
    border-bottom-right-radius: $btn-border-radius-sm;
  }
}

// smartevidence buttons inline with heading
#editor_holder .card-title + button.btn {
  display: inline-block;
  position: relative;
  top: -5px;
}
#editor_holder .card-title + button.btn + .btn-group,
.tab-pane .card-title + .btn-group {
  display: inline-block;
  position: relative;
  top: -6px;
}
