/**
* Fixed dimension (width/height) utilities
*
* naming convention: gl-{width|height}-{spacing-scale-index}
* notes:
* - Utilities should strictly follow $gl-spacing-scale
*/
@mixin gl-w-auto {
  width: auto;
}

@mixin gl-w-2 {
  width: $gl-spacing-scale-2;
}

@mixin gl-w-3 {
  width: $gl-spacing-scale-3;
}

@mixin gl-w-4 {
  width: $gl-spacing-scale-4;
}

@mixin gl-w-5 {
  width: $gl-spacing-scale-5;
}

@mixin gl-w-6 {
  width: $gl-spacing-scale-6;
}

@mixin gl-w-7 {
  width: $gl-spacing-scale-7;
}

@mixin gl-w-8 {
  width: $gl-spacing-scale-8;
}

@mixin gl-w-9 {
  width: $gl-spacing-scale-9;
}

@mixin gl-w-10 {
  width: $gl-spacing-scale-10;
}

@mixin gl-w-11 {
  width: $gl-spacing-scale-11;
}

@mixin gl-w-12 {
  width: $gl-spacing-scale-12;
}

@mixin gl-w-13 {
  width: $gl-spacing-scale-13;
}

@mixin gl-w-15 {
  width: $gl-spacing-scale-15;
}

@mixin gl-w-20 {
  width: $gl-spacing-scale-20;
}

@mixin gl-w-28 {
  width: $gl-spacing-scale-28;
}

@mixin gl-w-30 {
  width: $gl-spacing-scale-30;
}

@mixin gl-w-31 {
  width: $gl-spacing-scale-31;
}

@mixin gl-w-eighth {
  width: 12.5%;
}

@mixin gl-w-5p {
  width: 5%;
}

// In the future, any percentage-based classes should follow this convention per the conversation at https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1884#note_459949588
@mixin gl-w-10p {
  width: 10%;
}

@mixin gl-w-15p {
  width: 15%;
}

@mixin gl-w-20p {
  width: 20%;
}

@mixin gl-w-30p {
  width: 30%;
}

@mixin gl-w-40p {
  width: 40%;
}

@mixin gl-w-quarter {
  width: 25%;
}

@mixin gl-w-half {
  width: 50%;
}

@mixin gl-w-70p {
  width: 70%;
}

@mixin gl-w-85p {
  width: 85%;
}

@mixin gl-w-90p {
  width: 90%;
}

@mixin gl-w-full {
  width: 100%;
}

@mixin gl-w-grid-size-30 {
  width: $grid-size * 30;
}

@mixin gl-w-grid-size-40 {
  width: $grid-size * 40;
}

@mixin gl-sm-w-full {
  @include gl-media-breakpoint-up(sm) {
    @include gl-w-full;
  }
}

@mixin gl-md-w-full {
  @include gl-media-breakpoint-up(md) {
    @include gl-w-full;
  }
}

@mixin gl-lg-w-full {
  @include gl-media-breakpoint-up(lg) {
    @include gl-w-full;
  }
}

@mixin gl-w-max-content {
  width: max-content;
}

@mixin gl-layout-w-limited {
  max-width: $limited-layout-width;
}

@mixin gl-max-w-container-xl {
  max-width: $container-xl;
}

@mixin gl-h-auto {
  height: auto;
}

@mixin gl-h-0 {
  height: 0;
}

@mixin gl-h-2 {
  height: $gl-spacing-scale-2;
}

@mixin gl-h-3 {
  height: $gl-spacing-scale-3;
}

@mixin gl-h-4 {
  height: $gl-spacing-scale-4;
}

@mixin gl-h-5 {
  height: $gl-spacing-scale-5;
}

@mixin gl-h-6 {
  height: $gl-spacing-scale-6;
}

@mixin gl-h-7 {
  height: $gl-spacing-scale-7;
}

@mixin gl-h-8 {
  height: $gl-spacing-scale-8;
}

@mixin gl-h-9 {
  height: $gl-spacing-scale-9;
}

@mixin gl-h-10 {
  height: $gl-spacing-scale-10;
}

@mixin gl-h-11 {
  height: $gl-spacing-scale-11;
}

@mixin gl-h-11-5 {
  height: $gl-spacing-scale-11-5;
}

@mixin gl-h-13 {
  height: $gl-spacing-scale-13;
}

@mixin gl-h-full {
  height: 100%;
}

@mixin gl-h-100vh {
  height: 100vh;
}

/**
* Responsive dimension (width/height) utilities
*
* naming convention: gl-{breakpoint}-{width|height}-{spacing-scale-index}
* notes:
* - Utilities should strictly follow $gl-spacing-scale
*/

@mixin gl-sm-w-auto {
  @include gl-media-breakpoint-up(sm) {
    width: auto;
  }
}

@mixin gl-sm-w-half {
  @include gl-media-breakpoint-up(sm) {
    width: 50%;
  }
}

@mixin gl-sm-w-25p {
  @include gl-media-breakpoint-up(sm) {
    width: 25%;
  }
}

@mixin gl-sm-w-30p {
  @include gl-media-breakpoint-up(sm) {
    width: 30%;
  }
}

@mixin gl-sm-w-40p {
  @include gl-media-breakpoint-up(sm) {
    width: 40%;
  }
}

@mixin gl-sm-w-75p {
  @include gl-media-breakpoint-up(sm) {
    width: 75%;
  }
}

@mixin gl-md-h-9 {
  @include gl-media-breakpoint-up(md) {
    @include gl-h-9;
  }
}

@mixin gl-md-w-15 {
  @include gl-media-breakpoint-up(md) {
    @include gl-w-15;
  }
}

@mixin gl-md-w-20 {
  @include gl-media-breakpoint-up(md) {
    @include gl-w-20;
  }
}

@mixin gl-md-w-30 {
  @include gl-media-breakpoint-up(md) {
    @include gl-w-30;
  }
}

@mixin gl-md-w-half {
  @include gl-media-breakpoint-up(md) {
    width: 50%;
  }
}

@mixin gl-lg-w-half {
  @include gl-media-breakpoint-up(lg) {
    width: 50%;
  }
}

@mixin gl-md-w-auto {
  @include gl-media-breakpoint-up(md) {
    width: auto;
  }
}

@mixin gl-md-w-50p {
  @include gl-media-breakpoint-up(md) {
    width: 50%;
  }
}

@mixin gl-lg-w-1px {
  @include gl-media-breakpoint-up(lg) {
    width: 1px;
  }
}

@mixin gl-lg-w-auto {
  @include gl-media-breakpoint-up(lg) {
    width: auto;
  }
}

@mixin gl-lg-w-25p {
  @include gl-media-breakpoint-up(lg) {
    width: 25%;
  }
}

@mixin gl-lg-w-30p {
  @include gl-media-breakpoint-up(lg) {
    width: 30%;
  }
}

@mixin gl-lg-w-40p {
  @include gl-media-breakpoint-up(lg) {
    width: 40%;
  }
}

@mixin gl-lg-w-50p {
  @include gl-media-breakpoint-up(lg) {
    width: 50%;
  }
}

/**
* Minimum/Maximun dimension (width/height) utilities
*
* naming convention: gl-{min|max}-{w|h}-{spacing-scale-index}
* notes:
* - Utilities should strictly follow $gl-spacing-scale
*/
@mixin gl-min-w-0 {
  min-width: 0;
}

@mixin gl-min-w-1 {
  min-width: $gl-spacing-scale-1;
}

@mixin gl-min-w-2 {
  min-width: $gl-spacing-scale-2;
}

@mixin gl-min-w-3 {
  min-width: $gl-spacing-scale-3;
}

@mixin gl-min-w-4 {
  min-width: $gl-spacing-scale-4;
}

@mixin gl-min-w-5 {
  min-width: $gl-spacing-scale-5;
}

@mixin gl-min-w-6 {
  min-width: $gl-spacing-scale-6;
}

@mixin gl-min-w-7 {
  min-width: $gl-spacing-scale-7;
}

@mixin gl-min-w-8 {
  min-width: $gl-spacing-scale-8;
}

@mixin gl-min-w-9 {
  min-width: $gl-spacing-scale-9;
}

@mixin gl-min-w-10 {
  min-width: $gl-spacing-scale-10;
}

@mixin gl-min-w-20 {
  min-width: $gl-spacing-scale-20;
}

@mixin gl-min-w-33 {
  min-width: $gl-spacing-scale-33;
}

@mixin gl-min-w-full {
  min-width: 100%;
}

@mixin gl-min-w-fit-content {
  min-width: fit-content;
}

@mixin gl-min-h-0 {
  min-height: 0;
}

@mixin gl-min-h-5 {
  min-height: $gl-spacing-scale-5;
}

@mixin gl-min-h-6 {
  min-height: $gl-spacing-scale-6;
}

@mixin gl-min-h-7 {
  min-height: $gl-spacing-scale-7;
}

@mixin gl-min-h-8 {
  min-height: $gl-spacing-scale-8;
}

@mixin gl-min-h-100vh {
  min-height: 100vh;
}

@mixin gl-max-w-0 {
  max-width: 0;
}

@mixin gl-max-w-12 {
  max-width: $gl-spacing-scale-12;
}

@mixin gl-max-w-15 {
  max-width: $gl-spacing-scale-15;
}

@mixin gl-max-w-20 {
  max-width: $gl-spacing-scale-20;
}

@mixin gl-max-w-26 {
  max-width: $gl-spacing-scale-26;
}

@mixin gl-max-w-30 {
  max-width: $gl-spacing-scale-30;
}

@mixin gl-max-w-34 {
  max-width: $gl-spacing-scale-34;
}

@mixin gl-max-w-37 {
  max-width: $gl-spacing-scale-37;
}

@mixin gl-max-w-48 {
  max-width: $gl-spacing-scale-48;
}

@mixin gl-max-w-62 {
  max-width: $gl-spacing-scale-62;
}

@mixin gl-max-w-75 {
  max-width: $gl-spacing-scale-75;
}

@mixin gl-max-w-80 {
  max-width: $gl-spacing-scale-80;
}

@mixin gl-max-w-88 {
  max-width: $gl-spacing-scale-88;
}

@mixin gl-max-w-none {
  max-width: none;
}

@mixin gl-max-h-none {
  max-height: none;
}

@mixin gl-max-w-full {
  max-width: 100%;
}

@mixin gl-max-w-max-content {
  max-width: max-content;
}

@mixin gl-max-h-full {
  max-height: 100%;
}

@mixin gl-max-w-100vw {
  max-width: 100vw;
}

@mixin gl-max-w-50p {
  max-width: 50%;
}

/**
* Responsive Minimum/Maximun dimension (width/height) utilities
*
* naming convention: gl-{breakpoint}-{min|max}-{w|h}-{spacing-scale-index}
* notes:
* - Utilities should strictly follow $gl-spacing-scale
*/

@mixin gl-md-max-w-26 {
  @include gl-media-breakpoint-up(md) {
    max-width: $gl-spacing-scale-26;
  }
}

@mixin gl-md-max-w-15p {
  @include gl-media-breakpoint-up(md) {
    max-width: 15%;
  }
}

@mixin gl-md-max-w-30p {
  @include gl-media-breakpoint-up(md) {
    max-width: 30%;
  }
}

@mixin gl-md-max-w-50p {
  @include gl-media-breakpoint-up(md) {
    max-width: 50%;
  }
}

@mixin gl-md-max-w-70p {
  @include gl-media-breakpoint-up(md) {
    max-width: 70%;
  }
}

@mixin gl-lg-max-w-80p {
  @include gl-media-breakpoint-up(lg) {
    max-width: 80%;
  }
}

@mixin gl-lg-max-w-50p {
  @include gl-media-breakpoint-up(lg) {
    max-width: 50%;
  }
}