$gl-button-group-focus-z-index: 3;
$gl-button-group-border-z-index: $gl-button-group-focus-z-index + 1;

.gl-button-group:not(.gl-keyset-pagination),
.btn-group:not(.gl-keyset-pagination),
.gl-dropdown.btn-group {
  @apply gl-relative;

  // Reset borders
  > .gl-button:not(:first-child),
  > .btn-group:not(:first-child) > .gl-button,
  > .gl-new-dropdown:not(:first-child) > .gl-button {
    @apply gl-rounded-l-none gl-border-l-0;
  }

  > .gl-button:not(:last-child):not(.dropdown-toggle),
  > .btn-group:not(:last-child) > .gl-button,
  > .gl-new-dropdown:not(:last-child) > .gl-button {
    @apply gl-rounded-r-none gl-border-r-0;
  }

  // Pseudo element to mock border between buttons
  > .gl-button:not(:first-child),
  > .btn-group:not(:first-child) > .gl-button,
  > .gl-new-dropdown:not(:first-child) > .gl-button {
    @apply gl-relative gl-isolate gl-ml-[1px];

    &::before {
      content: "";
      @apply gl-absolute gl-bottom-[-1px] gl-left-[-1px] gl-top-[-1px] gl-block gl-w-[1px];
      z-index: $gl-button-group-border-z-index;
    }
  }

  // Bring focus to front
  > .gl-button {
    &:focus,
    &:active,
    &.active {
      z-index: $gl-button-group-focus-z-index;
    }
  }

  // GlButton confirm and danger variants have transparent gap between items
  .btn-confirm,
  .btn-danger {
    &:not(.disabled):not([disabled])::before {
      @apply gl-bg-transparent;
    }
  }

  // Move icon by 1px as we add a pseudo divider
  .gl-button.btn-icon .gl-button-text .gl-button-icon {
    @apply gl-mr-[-1px];
  }

  &.disabled,
  &[disabled] {
    &::before {
      background-color: var(--gl-button-disabled-border-color);
    }
  }

  .btn-confirm-secondary {
    &:not(.disabled):not([disabled])::before {
      background-color: var(--gl-button-confirm-secondary-border-color-default);
    }
  }

  .btn-danger-secondary {
    &:not(.disabled):not([disabled])::before {
      background-color: var(--gl-button-danger-secondary-border-color-default);
    }
  }
}

.gl-button-group-vertical,
.btn-group-vertical {
  @apply gl-flex-col gl-items-start gl-justify-center;

  > .gl-button,
  > .btn-group {
    @apply gl-relative gl-w-full;
  }

  // Reset borders
  > .gl-button:not(:first-child),
  > .btn-group:not(:first-child) > .gl-button,
  > .gl-new-dropdown:not(:first-child) > .gl-button {
    @apply gl-rounded-t-none gl-border-t-0;
  }

  > .gl-button:not(:last-child):not(.dropdown-toggle),
  > .btn-group:not(:last-child) > .gl-button,
  > .gl-new-dropdown:not(:last-child) > .gl-button {
    @apply gl-rounded-b-none gl-border-b-0;
  }

  // Pseudo element to mock border between buttons
  > .gl-button:not(:first-child),
  > .btn-group:not(:first-child) > .gl-button,
  > .gl-new-dropdown:not(:first-child) > .gl-button {
    @apply gl-relative gl-mt-[1px];

    &::before {
      content: "";
      @apply gl-absolute gl-left-[-1px] gl-right-[-1px] gl-top-[-1px] gl-block gl-h-[1px];
      z-index: $gl-button-group-border-z-index;
    }
  }

  // GlButton confirm and danger variants have transparent gap between items
  .btn-confirm,
  .btn-danger {
    &:not(.disabled):not([disabled])::before {
      @apply gl-bg-transparent;
    }
  }
}