/* BtnGroup */

/* A button group is a series of buttons laid out next to each other, all part
** of one visual button, but separated by rules to be separate. */

.BtnGroup {
  display: inline-block;
  vertical-align: middle;

  @mixin clearfix;

  /* Proper spacing for multiple button groups (a la, gollum editor) */
  & + .BtnGroup,
  & + .btn {
    margin-left: var(--primer-control-small-gap, 4px);
  }
}

.BtnGroup-item.btn {
  position: relative;
  float: left;
  border-right-width: 0;
  border-radius: 0;

  &:first-child {
    border-top-left-radius: var(--primer-borderRadius-medium, 6px);
    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);
  }

  &:last-child {
    border-right-width: var(--primer-borderWidth-thin, 1px);
    border-top-right-radius: var(--primer-borderRadius-medium, 6px);
    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);
  }

  &.selected,
  &[aria-selected='true'],
  &:focus,
  &:active,
  &:hover {
    border-right-width: var(--primer-borderWidth-thin, 1px);

    & + .BtnGroup-item,
    & + .BtnGroup-parent .BtnGroup-item {
      border-left-width: 0;
    }
  }
}

.BtnGroup-parent {
  float: left;

  &:first-child .BtnGroup-item {
    border-top-left-radius: var(--primer-borderRadius-medium, 6px);
    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);
  }

  &:last-child .BtnGroup-item {
    border-right-width: var(--primer-borderWidth-thin, 1px);
    border-top-right-radius: var(--primer-borderRadius-medium, 6px);
    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);
  }

  & .BtnGroup-item {
    border-right-width: 0;
    border-radius: 0;
  }

  &.selected,
  &[aria-selected='true'],
  &:focus,
  &:active,
  &:hover {
    & .BtnGroup-item {
      border-right-width: var(--primer-borderWidth-thin, 1px);
    }

    & + .BtnGroup-item,
    & + .BtnGroup-parent .BtnGroup-item {
      border-left-width: 0;
    }
  }
}

/* ensure that the focus ring sits above the adjacent buttons */
.BtnGroup-item,
.BtnGroup-parent {
  &:focus,
  &:active {
    z-index: 1;
  }
}