$stack-group: #{'.c-stack-group'};
$stack-group-item: #{'.c-stack-item'};
$stack-items-gap: 10px;

#{$stack-group} {
  display: flex;
  flex-flow: row nowrap;

  & > #{$stack-group-item} {
    margin-right: $stack-items-gap;

    &:last-child {
      margin-right: 0;
    }
  }

  // Modifiers
  &.is-inline {
    display: inline-flex;
  }

  &.is-column {
    flex-direction: column;

    & > #{$stack-group-item} {
      margin-bottom: $stack-items-gap;
      margin-right: initial;

      &:last-child {
        margin-bottom: 0;
        margin-right: initial;
      }
    }
  }

  &.is-wrap {
    flex-wrap: wrap;
  }

  &.is-items {
    &-start {
      align-items: start;
    }

    &-end {
      align-items: flex-end;
    }

    &-center {
      align-items: center;
    }

    &-stretch {
      align-items: stretch;
    }

    &-baseline {
      align-items: baseline;
    }
  }

  &.is-justify {
    &-start {
      justify-content: flex-start;
    }

    &-end {
      justify-content: flex-end;
    }

    &-center {
      justify-content: center;
    }

    &-between {
      justify-content: space-between;
    }

    &-around {
      justify-content: space-around;
    }
  }

}

#{$stack-group-item} {
  flex: 0 0 auto;
  display: block;

  &.is-flex {
    flex: 1 1 auto;
    width: 100%;
  }
}