.md-btn-group {
  display: inline-flex;
  flex-direction: row;
  align-items: stretch;
  border-radius: var(--md-radius-xs);
}

.md-btn-group--secondary {
  border: var(--md-border-width-sm) solid var(--md-border-primary);
}

/* Make Angular wrapper elements and ng-transclude layout-transparent */
.md-btn-group ng-transclude,
.md-btn-group md-button,
.md-btn-group md-icon-button {
  display: contents;
}

/* Strip all borders from child buttons in every state, the group owns the border */
.md-btn-group .md-btn,
.md-btn-group .md-btn:hover,
.md-btn-group .md-btn:active,
.md-btn-group .md-btn[disabled],
.md-btn-group .md-icon-btn,
.md-btn-group .md-icon-btn:hover,
.md-btn-group .md-icon-btn:active,
.md-btn-group .md-icon-btn[disabled] {
  border: none;
  border-radius: 0;
}

/* Border-radius only on the outermost corners, no overflow:hidden needed */
.md-btn-group md-button:first-child .md-btn,
.md-btn-group md-icon-button:first-child .md-icon-btn {
  border-top-left-radius: var(--md-radius-xs);
  border-bottom-left-radius: var(--md-radius-xs);
}

.md-btn-group md-button:last-child .md-btn,
.md-btn-group md-icon-button:last-child .md-icon-btn {
  border-top-right-radius: var(--md-radius-xs);
  border-bottom-right-radius: var(--md-radius-xs);
}

/* Divider between buttons, inset box-shadow doesn't affect layout */
.md-btn-group--primary md-button:not(:last-child) .md-btn,
.md-btn-group--primary md-icon-button:not(:last-child) .md-icon-btn {
  box-shadow: inset calc(-1 * var(--md-border-width-sm)) 0 0 var(--md-content-primary-inverse);
}

.md-btn-group--secondary md-button:not(:last-child) .md-btn,
.md-btn-group--secondary md-icon-button:not(:last-child) .md-icon-btn {
  box-shadow: inset calc(-1 * var(--md-border-width-sm)) 0 0 var(--md-border-primary);
}