/*!
 * 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. Allow OuiPanels to expand to fill the item.
 * 2. IE11 hack forces inner content of flex items to respect a higher parent's width (mostly) and
 *    not cause weird wrapping issues.
 */
.ouiFlexItem {
  @include internetExplorerOnly {
    min-width: 1px; /* 2 */
  }

  display: flex; /* 1 */
  flex-direction: column; /* 1 */

  /*
   * 1. We need the extra specificity here to override the FlexGroup > FlexItem styles.
   * 2. FlexItem can be manually set to not grow if needed.
   */
  &.ouiFlexItem--flexGrowZero { /* 1 */
    flex-grow: 0; /* 2 */
    flex-basis: auto; /* 2 */
  }

  @for $i from 1 through 10 {
    &.ouiFlexItem--flexGrow#{$i} {
      flex-grow: $i;
    }
  }
}

// On mobile we force them to stack and act the same.
@include ouiBreakpoint('xs', 's') {
  .ouiFlexGroup--responsive > .ouiFlexItem,
  .ouiFlexGrid--responsive > .ouiFlexItem {
    // sass-lint:disable-block no-important
    width: 100% !important;
    flex-basis: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: $ouiSize !important;
  }
}