/*!
 * 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.
 */

.ouiFlexGrid {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;

  > .ouiFlexItem {
    flex-grow: 0;

    &.ouiFlexItem--flexGrowZero {
      // sass-lint:disable-block no-important
      flex-grow: 0 !important;
      flex-basis: auto !important;
    }
  }
}

/**
  * 1. For vertical layouts we use columns instead of flex
  */
.ouiFlexGrid--directionColumn {
  display: block; /* 1 */
  column-gap: 0; // The "gap" comes from the margin around the item

  > .ouiFlexItem {
    display: inline-block; /* 1 */
    line-height: initial; // Ensures the item itself doesn't impose any height
  }
}

$gutterTypes: (
  // We're using calc which requires the px unit
  gutterNone: 0px, // sass-lint:disable-line zero-unit
  gutterSmall: $ouiSizeS,
  gutterMedium: $ouiSize,
  gutterLarge: $ouiSizeL,
  gutterXLarge: $ouiSizeXL,
);

$fractions: (
  fourths: (
    percentage: 25%,
    count: 4,
  ),
  thirds: (
    percentage: 33.3%,
    count: 3,
  ),
  halves: (
    percentage: 50%,
    count: 2,
  ),
  single: (
    percentage: 100%,
    count: 1,
  ),
);

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

  /**
   * Uncouple the gutter margin from the column widths to support cases where we use a FlexGrid
   * without columns.
   */
  .ouiFlexGrid--#{$gutterName} {
    margin: -$halfGutterSize;
    align-items: stretch;

    > .ouiFlexItem {
      margin: $halfGutterSize;
    }
  }

  @each $fraction, $map in $fractions {
    .ouiFlexGrid--#{$gutterName}.ouiFlexGrid--#{$fraction} {
      > .ouiFlexItem {
        flex-basis: calc(#{map-get($map, 'percentage')} - #{$gutterSize});
      }

      &.ouiFlexGrid--directionColumn { /* 1 */
        column-count: map-get($map, 'count');

        > .ouiFlexItem {
          width: calc(100% - #{$gutterSize});
        }
      }
    }
  }
}


@include ouiBreakpoint('xs', 's') {
  .ouiFlexGrid.ouiFlexGrid--responsive {
    // sass-lint:disable-block no-important
    margin-left: 0 !important;
    margin-right: 0 !important;
    column-count: 1 !important;
  }
}