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

/**
* Background color utilities.
*
* naming convention: gl-bg-{color-palette-variable-name}
* notes:
* - Strictly based design system color palette. See variables.scss
* for a comprehensive list.
*/
@mixin gl-bg-transparent($hover: true) {
  background-color: $transparent;
}

@mixin gl-bg-current-color {
  background-color: currentColor;
}

@mixin gl-bg-white {
  background-color: $white;
}

@mixin gl-bg-black {
  background-color: $black;
}

@mixin gl-reset-bg {
  background-color: inherit;
}

@mixin gl-bg-gray-10 {
  background-color: $gray-10;
}

@mixin gl-bg-gray-50 {
  background-color: $gray-50;
}

@mixin gl-bg-gray-100 {
  background-color: $gray-100;
}

@mixin gl-bg-gray-200 {
  background-color: $gray-200;
}

@mixin gl-bg-gray-300 {
  background-color: $gray-300;
}

@mixin gl-bg-gray-400 {
  background-color: $gray-400;
}

@mixin gl-bg-gray-500 {
  background-color: $gray-600;
}

@mixin gl-bg-gray-600 {
  background-color: $gray-600;
}

@mixin gl-bg-gray-700 {
  background-color: $gray-700;
}

@mixin gl-bg-gray-900 {
  background-color: $gray-900;
}

@mixin gl-bg-blue-50($hover: true) {
  background-color: $blue-50;
}

@mixin gl-bg-blue-100 {
  background-color: $blue-100;
}

@mixin gl-bg-blue-200 {
  background-color: $blue-200;
}

@mixin gl-bg-blue-500 {
  background-color: $blue-500;
}

@mixin gl-bg-blue-600 {
  background-color: $blue-600;
}

@mixin gl-bg-blue-700 {
  background-color: $blue-700;
}

@mixin gl-bg-green-50 {
  background-color: $green-50;
}

@mixin gl-bg-green-100 {
  background-color: $green-100;
}

@mixin gl-bg-green-200 {
  background-color: $green-200;
}

@mixin gl-bg-green-500 {
  background-color: $green-500;
}

@mixin gl-bg-green-600 {
  background-color: $green-600;
}

@mixin gl-bg-green-700 {
  background-color: $green-700;
}

@mixin gl-bg-theme-green-100 {
  background-color: $theme-green-100;
}

@mixin gl-bg-orange-50 {
  background-color: $orange-50;
}

@mixin gl-bg-orange-100 {
  background-color: $orange-100;
}

@mixin gl-bg-orange-200 {
  background-color: $orange-200;
}

@mixin gl-bg-orange-500 {
  background-color: $orange-500;
}

@mixin gl-bg-orange-600 {
  background-color: $orange-600;
}

@mixin gl-bg-orange-700 {
  background-color: $orange-700;
}

@mixin gl-bg-red-50 {
  background-color: $red-50;
}

@mixin gl-bg-red-100 {
  background-color: $red-100;
}

@mixin gl-bg-red-200 {
  background-color: $red-200;
}

@mixin gl-bg-red-500 {
  background-color: $red-500;
}

@mixin gl-bg-red-600 {
  background-color: $red-600;
}

@mixin gl-bg-red-700 {
  background-color: $red-700;
}

@mixin gl-bg-theme-indigo-50 {
  background-color: $theme-indigo-50;
}

@mixin gl-bg-theme-indigo-500 {
  background-color: $theme-indigo-500;
}

@mixin gl-bg-theme-indigo-700 {
  background-color: $theme-indigo-700;
}

@mixin gl-bg-theme-indigo-900 {
  background-color: $theme-indigo-900;
}

@mixin gl-bg-theme-blue-500 {
  background-color: $theme-blue-500;
}

@mixin gl-bg-theme-blue-700 {
  background-color: $theme-blue-700;
}

@mixin gl-bg-theme-blue-900 {
  background-color: $theme-blue-900;
}

@mixin gl-bg-theme-green-500 {
  background-color: $theme-green-500;
}

@mixin gl-bg-theme-green-700 {
  background-color: $theme-green-700;
}

@mixin gl-bg-theme-green-900 {
  background-color: $theme-green-900;
}

@mixin gl-bg-theme-red-500 {
  background-color: $theme-red-500;
}

@mixin gl-bg-theme-red-700 {
  background-color: $theme-red-700;
}

@mixin gl-bg-theme-red-900 {
  background-color: $theme-red-900;
}

@mixin gl-bg-data-viz-blue-500 {
  background-color: $data-viz-blue-500;
}

@mixin gl-bg-data-viz-blue-600 {
  background-color: $data-viz-blue-600;
}

@mixin gl-bg-data-viz-blue-700 {
  background-color: $data-viz-blue-700;
}

@mixin gl-bg-data-viz-blue-800 {
  background-color: $data-viz-blue-800;
}

@mixin gl-bg-data-viz-blue-900 {
  background-color: $data-viz-blue-900;
}

@mixin gl-bg-data-viz-blue-950 {
  background-color: $data-viz-blue-950;
}

@mixin gl-bg-data-viz-orange-500 {
  background-color: $data-viz-orange-500;
}

@mixin gl-bg-data-viz-orange-600 {
  background-color: $data-viz-orange-600;
}

@mixin gl-bg-data-viz-orange-700 {
  background-color: $data-viz-orange-700;
}

@mixin gl-bg-data-viz-orange-800 {
  background-color: $data-viz-orange-800;
}

@mixin gl-bg-data-viz-orange-900 {
  background-color: $data-viz-orange-900;
}

@mixin gl-bg-data-viz-orange-950 {
  background-color: $data-viz-orange-950;
}

@mixin gl-bg-data-viz-aqua-500 {
  background-color: $data-viz-aqua-500;
}

@mixin gl-bg-data-viz-aqua-600 {
  background-color: $data-viz-aqua-600;
}

@mixin gl-bg-data-viz-aqua-700 {
  background-color: $data-viz-aqua-700;
}

@mixin gl-bg-data-viz-aqua-800 {
  background-color: $data-viz-aqua-800;
}

@mixin gl-bg-data-viz-aqua-900 {
  background-color: $data-viz-aqua-900;
}

@mixin gl-bg-data-viz-aqua-950 {
  background-color: $data-viz-aqua-950;
}

@mixin gl-bg-data-viz-green-500 {
  background-color: $data-viz-green-500;
}

@mixin gl-bg-data-viz-green-600 {
  background-color: $data-viz-green-600;
}

@mixin gl-bg-data-viz-green-700 {
  background-color: $data-viz-green-700;
}

@mixin gl-bg-data-viz-green-800 {
  background-color: $data-viz-green-800;
}

@mixin gl-bg-data-viz-green-900 {
  background-color: $data-viz-green-900;
}

@mixin gl-bg-data-viz-green-950 {
  background-color: $data-viz-green-950;
}

@mixin gl-bg-data-viz-magenta-500 {
  background-color: $data-viz-magenta-500;
}

@mixin gl-bg-data-viz-magenta-600 {
  background-color: $data-viz-magenta-600;
}

@mixin gl-bg-data-viz-magenta-700 {
  background-color: $data-viz-magenta-700;
}

@mixin gl-bg-data-viz-magenta-800 {
  background-color: $data-viz-magenta-800;
}

@mixin gl-bg-data-viz-magenta-900 {
  background-color: $data-viz-magenta-900;
}

@mixin gl-bg-data-viz-magenta-950 {
  background-color: $data-viz-magenta-950;
}

@mixin gl-bg-none {
  background: none;
}

/**
* Background position utilities.
*
* naming convention: gl-bg-{position}
*/
@mixin gl-bg-center {
  background-position: center;
}

/**
* Background size utilities.
*
* naming convention: gl-bg-{repeat-pattern}
*/
@mixin gl-bg-size-100p {
  background-size: 100% 100%;
}

@mixin gl-bg-size-cover {
  background-size: cover;
}

/**
* Background repeat utilities.
*
* naming convention: gl-bg-{repeat-pattern}
*/
@mixin gl-bg-no-repeat {
  background-repeat: no-repeat;
}

/**
* Background image utilities.
*
* naming convention: gl-bg-{image-name}
*/
@mixin gl-bg-chevron-left {
  background-image: url($gl-icon-chevron-left);
}

@mixin gl-bg-chevron-right {
  background-image: url($gl-icon-chevron-right);
}

@mixin gl-bg-chevron-down {
  background-image: url($gl-icon-chevron-down);
}