.button-group {
  display: inline-flex;
  margin-top: -($spacing--xs);
  overflow: hidden;

  .button {
    margin-top: $spacing--xs;
  }

  &--full-width {
    display: flex;
  }
}

@include viewport--l('inversed') {
  .button-group {
    flex-wrap: wrap;
    margin-left: -5px;
    margin-right: -5px;

    .button {
      flex: 1 1 auto;
      margin-left: 5px;
      margin-right: 5px;
    }
  }
}

@include viewport--l {
  .button-group:not(.button-group--reverse-on-l) {
    .button {
      &:first-child {
        margin-right: 5px;
      }

      &:last-child {
        margin-left: 5px;
      }
    }
  }

  .button-group--reverse-on-l {
    .button {
      &:first-child {
        margin-left: 5px;
        order: 2;
      }

      &:last-child {
        margin-right: 5px;
      }
    }
  }

  //Yes-No version: stretches button along with content to max modal width & stacks buttons
  .button-group--options {
    flex-wrap: wrap;

    .button {
      flex-grow: 1;
    }

    &:not(.button-group--reverse-on-l) .button {
      margin-right: $baseline;
    }

    &:not(.button-group--reverse-on-l) .button:last-child {
      margin-left: 0;
    }

    &:not(.button--full-width),
    a.button:not(.button--full-width) {
      max-width: 400px; //same as modal width
    }
  }
}