/**
* 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-b-2-gray-100 {
  box-shadow: inset 0 -#{$gl-border-size-2} 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-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-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-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-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-drawer {
  box-shadow: -4px 0 8px $gray-200;
}