@gitlab/ui/src/scss/utility-mixins/box-shadow.scss

/**
* Inset border utilities
*
* Uses box-shadow: inset to create a border that does not
* increase the box size of an element
*
* Naming convention: gl-inset-border-{border-position}-{border-size}-{color-name}
*/

@mixin gl-inset-border-1-gray-100 {
  box-shadow: inset 0 0 0 $gl-border-size-1 $gray-100;
}

@mixin gl-inset-border-1-gray-200 {
  box-shadow: inset 0 0 0 $gl-border-size-1 $gray-200;
}

@mixin gl-inset-border-1-gray-400 {
  box-shadow: inset 0 0 0 $gl-border-size-1 $gray-400;
}

@mixin gl-inset-border-1-gray-600 {
  box-shadow: inset 0 0 0 $gl-border-size-1 $gray-600;
}

@mixin gl-inset-border-2-gray-300 {
  box-shadow: inset 0 0 0 $gl-border-size-2 $gray-300;
}

@mixin gl-inset-border-2-gray-400 {
  box-shadow: inset 0 0 0 $gl-border-size-2 $gray-400;
}

@mixin gl-inset-border-y-1-gray-200 {
  box-shadow: inset 0 #{$gl-border-size-1} 0 0 $gray-200,
    inset 0 -#{$gl-border-size-1} 0 0 $gray-200;
}

@mixin gl-inset-border-y-1-gray-100 {
  box-shadow: inset 0 #{$gl-border-size-1} 0 0 $gray-100,
    inset 0 -#{$gl-border-size-1} 0 0 $gray-100;
}

@mixin gl-inset-border-b-1-gray-100 {
  box-shadow: inset 0 -#{$gl-border-size-1} 0 0 $gray-100;
}

@mixin gl-inset-border-b-2-gray-100 {
  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $gray-100;
}

@mixin gl-inset-border-l-4-gray-100 {
  box-shadow: inset #{$gl-border-size-4} 0 0 0 $gray-100;
}

@mixin gl-inset-border-b-1-gray-200 {
  box-shadow: inset 0 -#{$gl-border-size-1} 0 0 $gray-200;
}

@mixin gl-inset-border-b-2-gray-200 {
  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $gray-200;
}

@mixin gl-inset-border-b-1-gray-300 {
  box-shadow: inset 0 -#{$gl-border-size-1} 0 0 $gray-300;
}

@mixin gl-inset-border-b-2-gray-300 {
  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $gray-300;
}

@mixin gl-inset-border-b-2-gray-500 {
  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $gray-500;
}

@mixin gl-inset-border-b-1-gray-900 {
  box-shadow: inset 0 -#{$gl-border-size-1} 0 0 $gray-900;
}

@mixin gl-inset-border-1-blue-500 {
  box-shadow: inset 0 0 0 $gl-border-size-1 $blue-500;
}

@mixin gl-inset-border-1-blue-600 {
  box-shadow: inset 0 0 0 $gl-border-size-1 $blue-600;
}

@mixin gl-inset-border-b-2-blue-500 {
  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $blue-500;
}

@mixin gl-inset-border-1-green-500 {
  box-shadow: inset 0 0 0 $gl-border-size-1 $green-500;
}

@mixin gl-inset-border-1-green-600 {
  box-shadow: inset 0 0 0 $gl-border-size-1 $green-600;
}

@mixin gl-inset-border-2-blue-400($focus: true) {
  box-shadow: inset 0 0 0 $gl-border-size-2 $blue-400;
}

@mixin gl-inset-border-2-green-400 {
  box-shadow: inset 0 0 0 $gl-border-size-2 $green-400;
}

@mixin gl-inset-border-1-orange-500 {
  box-shadow: inset 0 0 0 $gl-border-size-1 $orange-500;
}

@mixin gl-inset-border-1-orange-600 {
  box-shadow: inset 0 0 0 $gl-border-size-1 $orange-600;
}

@mixin gl-inset-border-1-red-300 {
  box-shadow: inset 0 0 0 $gl-border-size-1 $red-300;
}

@mixin gl-inset-border-1-red-400 {
  box-shadow: inset 0 0 0 $gl-border-size-1 $red-400;
}

@mixin gl-inset-border-1-red-500 {
  box-shadow: inset 0 0 0 $gl-border-size-1 $red-500;
}

@mixin gl-inset-border-1-red-600 {
  box-shadow: inset 0 0 0 $gl-border-size-1 $red-600;
}

@mixin gl-inset-border-l-3-red-600 {
  box-shadow: inset $gl-border-size-3 0 0 0 $red-600;
}

@mixin gl-inset-border-1-gray-a-08 {
  box-shadow: inset 0 0 0 $gl-border-size-1 $t-gray-a-08;
}

@mixin gl-inset-border-b-2-theme-accent {
  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 var(--gl-theme-accent, $theme-indigo-500);
}

@mixin gl-inset-border-b-2-theme-indigo-500 {
  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-indigo-500;
}

@mixin gl-inset-border-b-2-theme-indigo-300 {
  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-indigo-300;
}

@mixin gl-inset-border-b-2-theme-red-500 {
  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-red-500;
}

@mixin gl-inset-border-b-2-theme-light-red-500 {
  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-light-red-500;
}

@mixin gl-inset-border-b-2-theme-blue-500 {
  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-blue-500;
}

@mixin gl-inset-border-b-2-theme-light-blue-500 {
  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-light-blue-500;
}

@mixin gl-inset-border-b-2-theme-green-300 {
  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-green-300;
}

@mixin gl-inset-border-b-2-theme-green-500 {
  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-green-500;
}

/**
* Box shadow utilities
*
* naming convention: gl-shadow-{config-name}
*/
@mixin gl-shadow-none {
  box-shadow: none;
}

@mixin gl-shadow {
  box-shadow: 0 1px 4px 0 rgba(#000, 0.3);
}

@mixin gl-shadow-x0-y2-b4-s0 {
  box-shadow: 0 2px 4px 0 rgba(#000, 0.1);
}

@mixin gl-shadow-blue-200-x0-y0-b4-s2 {
  box-shadow: 0 0 4px 2px $blue-200;
}

@mixin gl-shadow-x0-y0-b3-s1-blue-500 {
  box-shadow: inset 0 0 3px 1px $blue-500;
}

/**
* New utilities to match design specs
* Per https: //gitlab.com/gitlab-org/gitlab-ui/-/issues/615,
* some of the above could be replaced.
*
* These use gray instead of black to align with
* tinted neutrals.
*/

@mixin gl-shadow-sm {
  box-shadow: 0 1px 2px $t-gray-a-08;
}

@mixin gl-shadow-md {
  box-shadow: 0 2px 8px $t-gray-a-16, 0 0 2px $t-gray-a-16;
}

@mixin gl-shadow-lg {
  box-shadow: 0 4px 12px $t-gray-a-16, 0 0 4px $t-gray-a-16;
}