/**
  Please note: These are deprecated in favor of the Gitlab UI utility classes.
  Check https://unpkg.com/browse/@gitlab/ui/src/scss/utilities.scss
  to see the available utility classes. If you cannot find the class you need,
  consider adding it to Gitlab UI before adding it here.
**/
@each $index, $size in $type-scale {
  #{'.text-#{$index}'} {
    font-size: $size;
  }
}

@each $index, $size in $size-scale {
  #{'.mw-#{$index}'} {
    max-width: $size;
  }
}

@each $index, $size in $type-scale {
  #{'.lh-#{$index}'} {
    line-height: $size;
  }
}

@for $i from 1 through 12 {
  #{'.tab-width-#{$i}'} {
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -moz-tab-size: $i;
    tab-size: $i;
  }
}

.border-width-1px { border-width: 1px; }
.border-style-dashed { border-style: dashed; }
.border-style-solid { border-style: solid; }
.border-color-blue-300 { border-color: $blue-300; }
.border-color-default { border-color: $border-color; }
.border-radius-default { border-radius: $border-radius-default; }
.border-radius-small { border-radius: $border-radius-small; }
.box-shadow-default { box-shadow: 0 2px 4px 0 $t-gray-a-24; }

// Override Bootstrap class with offset for system-header and
// performance bar when present
.fixed-top {
  top: $calc-system-headers-height;
}

.gl-children-ml-sm-3 > * {
  @include media-breakpoint-up(sm) {
    @include gl-ml-3;
  }
}

.gl-first-child-ml-sm-0 > a:first-child,
.gl-first-child-ml-sm-0 > button:first-child {
  @include media-breakpoint-up(sm) {
    @include gl-ml-0;
  }
}

.mh-50vh { max-height: 50vh; }

.min-width-0 {
  // By default flex items don't shrink below their minimum content size. To change this, set the item's min-width
  min-width: 0;
}

.gl-w-16 { width: px-to-rem($grid-size * 2); }
.gl-w-64 { width: px-to-rem($grid-size * 8); }
.gl-h-32 { height: px-to-rem($grid-size * 4); }
.gl-h-64 { height: px-to-rem($grid-size * 8); }

// Migrate this to Gitlab UI when FF is removed
// https://gitlab.com/groups/gitlab-org/-/epics/2882
.gl-h-200\! { height: px-to-rem($grid-size * 25) !important; }

// This utility is used to force the z-index to match that of dropdown menu's
.gl-z-dropdown-menu\! {
  z-index: $zindex-dropdown-menu !important;
}

// This is used to help prevent issues with margin collapsing.
// See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing.
.gl-force-block-formatting-context::after {
  content: '';
  display: flex;
}

/**
  Note: ::-webkit-scrollbar is a non-standard rule only
  supported by webkit browsers.

  It is added here to migrate components that use
  scrolling-links() mixin from `app/assets/stylesheets/framework/mixins.scss`.

  It should not be used elsewhere: it may impact accessibility as well as
  add browser compatibility issues.

  See: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
**/
.gl-webkit-scrollbar-display-none {
  &::-webkit-scrollbar {
    display: none;
  }
}

// Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1465
.gl-focus-ring-border-1-gray-900\! {
  @include gl-focus($gl-border-size-1, $gray-900, true);
}

.gl-sm-mr-0\! {
  @include gl-media-breakpoint-down(md) {
    margin-right: 0 !important;
  }
}

.gl-sm-mb-5 {
  @include gl-media-breakpoint-down(md) {
    margin-bottom: $gl-spacing-scale-5;
  }
}

.gl-fill-orange-500 {
  fill: $orange-500;
}

.gl-fill-red-500 {
  fill: $red-500;
}

.gl-hover-border-gray-100:hover {
  border-color: $gray-100;
}

.gl-last-of-type-border-b-0:last-of-type {
  @include gl-border-b-0;
}

.gl-md-h-9 {
  @include gl-media-breakpoint-up(md) {
    height: $gl-spacing-scale-9;
  }
}

.gl-pl-12 {
  padding-left: $gl-spacing-scale-12;
}