// Element groups
// --------------------------------------------------

html {
  .group {
    @include group(15px, 15px);
  }

  .group-xs {
    @include group(5px, 5px);
  }

  .group-sm {
    @include group(10px, 10px);
  }

  .group-md {
    @include group(15px, 15px);
  }

  .group-lg {
    @include group(20px, 20px);
  }

  .group-xl {
    @include group(30px, 30px);
  }

  .group-top {
    > *, > *:first-child {
      vertical-align: top;
    }
  }

  .group-middle {
    > *, > *:first-child {
      vertical-align: middle;
    }
  }

  .group-bottom {
    > *, > *:first-child {
      vertical-align: bottom;
    }
  }

  .group-inline {
    > * {
      display: inline;
      &:not(:last-child) {
        margin-right: .25em;
      }
    }
  }

  .group-xl-responsive {
    @include group(18px, 18px);

    @include media-breakpoint-up(md) {
      @include group(30px, 30px);
    }
  }
}

.group-flex-center {
  @include display-inline-flex;
  @include flex-direction(row);
  @include flex-wrap(wrap);
  @include align-items(center);
  @include justify-content(center);
}