/* ==========================================================================
 * Button Group
 * ========================================================================== */

.mds-c-button-group {
  background-color: var(--mds-t-background-color--primary);
  border-radius: var(--mds-d-border-radius--default);
  box-shadow: var(--mds-d-elevation--1);
  display: inline-flex;
  position: relative;
  vertical-align: middle;

  > .mds-c-button {
    background-color: var(--mds-t-background-color--primary);
    border-radius: 0;

    &,
    &:hover,
    &:active {
      border-color: var(--mds-t-border-color--inverse);
    }

    &:hover {
      background-color: var(--mds-c-button--background-color-hover);
      z-index: 1;
    }

    &:active {
      background-color: var(--mds-c-button--background-color-active);
    }

    &:first-child {
      border-bottom-left-radius: var(--mds-d-border-radius--default);
      border-top-left-radius: var(--mds-d-border-radius--default);
    }

    &:last-child {
      border-bottom-right-radius: var(--mds-d-border-radius--default);
      border-top-right-radius: var(--mds-d-border-radius--default);
    }

    + .mds-c-button {
      margin-left: -1px;
    }
  }
}