@gitlab/ui/src/scss/utility-mixins/flex.scss

/**
* Flexbox utilities
*/
@mixin gl-align-items-baseline {
  align-items: baseline;
}

@mixin gl-align-items-center {
  align-items: center;
}

@mixin gl-align-items-flex-start {
  align-items: flex-start;
}

@mixin gl-align-items-flex-end {
  align-items: flex-end;
}

@mixin gl-align-items-stretch {
  align-items: stretch;
}

@mixin gl-xs-align-items-baseline {
  @media (max-width: $breakpoint-sm) {
    @include gl-align-items-baseline;
  }
}

@mixin gl-lg-align-items-baseline {
  @media (min-width: $breakpoint-lg) {
    @include gl-align-items-baseline;
  }
}

@mixin gl-md-align-items-center {
  @media (min-width: $breakpoint-md) {
    @include gl-align-items-center;
  }
}

@mixin gl-lg-align-items-center {
  @media (min-width: $breakpoint-lg) {
    @include gl-align-items-center;
  }
}

@mixin gl-sm-align-items-flex-end {
  @media (min-width: $breakpoint-sm) {
    @include gl-align-items-flex-end;
  }
}

@mixin gl-lg-align-items-flex-end {
  @media (min-width: $breakpoint-lg) {
    @include gl-align-items-flex-end;
  }
}

@mixin gl-flex-wrap {
  flex-wrap: wrap;
}

@mixin gl-lg-flex-wrap {
  @media (min-width: $breakpoint-lg) {
    @include gl-flex-wrap;
  }
}

@mixin gl-xl-flex-wrap {
  @media (min-width: $breakpoint-xl) {
    @include gl-flex-wrap;
  }
}

@mixin gl-sm-flex-wrap {
  @media (min-width: $breakpoint-sm) {
    @include gl-flex-wrap;
  }
}

// Deprecated, prefer `gl-sm-flex-wrap`
@mixin gl-flex-sm-wrap {
  @media (min-width: $breakpoint-sm) {
    @include gl-flex-wrap;
  }
}

@mixin gl-flex-nowrap {
  flex-wrap: nowrap;
}

@mixin gl-sm-flex-direction-column {
  @media (max-width: $breakpoint-md) {
    @include gl-flex-direction-column;
  }
}

@mixin gl-xs-flex-direction-column {
  @media (max-width: $breakpoint-sm) {
    flex-direction: column;
  }
}

@mixin gl-flex-direction-column {
  flex-direction: column;
}

@mixin gl-flex-direction-column-reverse {
  flex-direction: column-reverse;
}

@mixin gl-flex-direction-row {
  flex-direction: row;
}

@mixin gl-sm-flex-direction-row {
  @media (min-width: $breakpoint-sm) {
    @include gl-flex-direction-row;
  }
}

@mixin gl-md-flex-direction-row {
  @media (min-width: $breakpoint-md) {
    @include gl-flex-direction-row;
  }
}

@mixin gl-lg-flex-direction-row {
  @media (min-width: $breakpoint-lg) {
    @include gl-flex-direction-row;
  }
}

@mixin gl-xl-flex-direction-row {
  @media (min-width: $breakpoint-xl) {
    @include gl-flex-direction-row;
  }
}

@mixin gl-flex-direction-row-reverse {
  flex-direction: row-reverse;
}

@mixin gl-flex-shrink-0 {
  flex-shrink: 0;
}

@mixin gl-flex-grow-0 {
  flex-grow: 0;
}

@mixin gl-md-flex-grow-0 {
  @media (min-width: $breakpoint-md) {
    @include gl-flex-grow-0;
  }
}

@mixin gl-flex-grow-1 {
  flex-grow: 1;
}

@mixin gl-flex-fill-1 {
  flex: 1;
}

@mixin gl-flex-fill-2 {
  flex: 2;
}

@mixin gl-md-flex-fill-1 {
  @media (min-width: $breakpoint-lg) {
    @include gl-flex-fill-1;
  }
}

@mixin gl-lg-flex-fill-1 {
  @media (min-width: $breakpoint-lg) {
    @include gl-flex-fill-1;
  }
}

@mixin gl-flex-basis-0 {
  flex-basis: 0;
}

@mixin gl-flex-basis-half {
  flex-basis: 50%;
}

@mixin gl-justify-content-center {
  justify-content: center;
}

@mixin gl-justify-content-end {
  justify-content: flex-end;
}

@mixin gl-sm-justify-content-end {
  @media (min-width: $breakpoint-md) {
    @include gl-justify-content-end;
  }
}

@mixin gl-md-justify-content-end {
  @media (min-width: $breakpoint-md) {
    @include gl-justify-content-end;
  }
}

@mixin gl-lg-justify-content-end {
  @media (min-width: $breakpoint-lg) {
    @include gl-justify-content-end;
  }
}

@mixin gl-justify-content-space-between {
  justify-content: space-between;
}

@mixin gl-justify-content-start {
  justify-content: flex-start;
}

@mixin gl-justify-content-md-start {
  @media (min-width: $breakpoint-md) {
    @include gl-justify-content-start;
  }
}

@mixin gl-align-self-start {
  align-self: flex-start;
}

@mixin gl-align-self-end {
  align-self: flex-end;
}

@mixin gl-align-self-center {
  align-self: center;
}

@mixin gl-sm-align-self-center {
  @media (min-width: $breakpoint-sm) {
    @include gl-align-self-center;
  }
}

@mixin gl-md-align-self-center {
  @media (min-width: $breakpoint-md) {
    @include gl-align-self-center;
  }
}

/**
 * Order utilities
 *
 * naming convention: gl-order-{position}
 */

@mixin gl-order-n1 {
  order: -1;
}