.button-group {
  display: flex;

  & > * {
    position: relative;
    flex: 0 0 auto;

    &:hover,
    &:focus,
    &:active {
      z-index: 2;
    }

    &:not(:first-child):not(:last-child) {
      border-radius: 0;
      margin-left: calc(var(--button-border-width) * -1);
    }

    &:first-child {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    &:last-child {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      margin-left: calc(var(--button-border-width) * -1);
    }
  }
}

.button-group-block {
  width: 100%;

  & button,
  & .button {
    flex: 1 1 auto;
  }
}