/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

/**
 * 1. Not always needed, but fixes an IE11 issue when flex-groups are nested under display: flex elements.
 * 2. IE requires a unit to grow.
 */

.ouiFlexGroup {
  display: flex;
  align-items: stretch;
  flex-grow: 1; /* 1 */

  .ouiFlexItem {
    @include internetExplorerOnly {
      min-width: 1px;
    }

    flex-grow: 1;
    flex-basis: 0%; /* 2 */
  }
}

$gutterTypes: (
  gutterExtraSmall: $ouiSizeXS,
  gutterSmall: $ouiSizeS,
  gutterMedium: $ouiSize,
  gutterLarge: $ouiSizeL,
  gutterExtraLarge: $ouiSizeXXL,
);

// Gutter Sizes
@each $gutterName, $gutterSize in $gutterTypes {
  $halfGutterSize: $gutterSize * .5;

  .ouiFlexGroup--#{$gutterName} {
    margin: -$halfGutterSize;

    & > .ouiFlexItem {
      margin: $halfGutterSize;
    }
  }
}

// Justify the grid
.ouiFlexGroup--justifyContentSpaceEvenly {
  justify-content: space-evenly;
}

.ouiFlexGroup--justifyContentSpaceBetween {
  justify-content: space-between;
}

.ouiFlexGroup--justifyContentSpaceAround {
  justify-content: space-around;
}

.ouiFlexGroup--justifyContentCenter {
  justify-content: center;
}

.ouiFlexGroup--justifyContentFlexEnd {
  justify-content: flex-end;
}

// Align Items
.ouiFlexGroup--alignItemsFlexStart {
  align-items: flex-start;
}

.ouiFlexGroup--alignItemsCenter {
  align-items: center;
}

.ouiFlexGroup--alignItemsFlexEnd {
  align-items: flex-end;
}

.ouiFlexGroup--alignItemsBaseline {
  align-items: baseline;
}

// Direction

.ouiFlexGroup--directionRow {
  flex-direction: row;
}

.ouiFlexGroup--directionRowReverse {
  flex-direction: row-reverse;
}

.ouiFlexGroup--directionColumn {
  flex-direction: column;
}

.ouiFlexGroup--directionColumnReverse {
  flex-direction: column-reverse;
}

// Wrap
.ouiFlexGroup--wrap {
  flex-wrap: wrap;
}

@include ouiBreakpoint('xs', 's') {
  .ouiFlexGroup--responsive {
    flex-wrap: wrap;
    margin-left: 0;
    margin-right: 0;
  }
}