@function shadowOpacity($opacity) {
  @if (lightness($euiTextColor) < 50) {
    @return $opacity * 1;
  } @else {
    @return $opacity * 2.5;
  }
}

@mixin euiSlightShadow($color: $euiShadowColor) {
  box-shadow:
    0 .8px .8px rgba($color, shadowOpacity(.04)),
    0 2.3px 2px rgba($color, shadowOpacity(.03));
}

@mixin euiBottomShadowSmall($color: $euiShadowColor) {
  box-shadow:
    0 .7px 1.4px rgba($color, shadowOpacity(.07)),
    0 1.9px 4px rgba($color, shadowOpacity(.05)),
    0 4.5px 10px rgba($color, shadowOpacity(.05));
}

@mixin euiBottomShadowMedium($color: $euiShadowColor) {
  box-shadow:
    0 .9px 4px -1px rgba($color, shadowOpacity(.08)),
    0 2.6px 8px -1px rgba($color, shadowOpacity(.06)),
    0 5.7px 12px -1px rgba($color, shadowOpacity(.05)),
    0 15px 15px -1px rgba($color, shadowOpacity(.04));
}

// Similar to shadow medium but without the bottom depth. Useful for popovers
// that drop UP rather than DOWN.
@mixin euiBottomShadowFlat($color: $euiShadowColor) {
  box-shadow:
    0 0 .8px rgba($color, shadowOpacity(.06)),
    0 0 2px rgba($color, shadowOpacity(.04)),
    0 0 5px rgba($color, shadowOpacity(.04)),
    0 0 17px rgba($color, shadowOpacity(.03));
}

@mixin euiBottomShadow($color: $euiShadowColor) {
  box-shadow:
    0 1px 5px rgba($color, shadowOpacity(.1)),
    0 3.6px 13px rgba($color, shadowOpacity(.07)),
    0 8.4px 23px rgba($color, shadowOpacity(.06)),
    0 23px 35px rgba($color, shadowOpacity(.05));
}

@mixin euiBottomShadowLarge(
  $color: $euiShadowColor,
  $opacity: 0,
  $reverse: false
) {
  @if ($reverse) {
    box-shadow:
      0 -2.7px 9px rgba($color, shadowOpacity(.13)),
      0 -9.4px 24px rgba($color, shadowOpacity(.09)),
      0 -21.8px 43px rgba($color, shadowOpacity(.08));
  } @else {
    box-shadow:
      0 2.7px 9px rgba($color, shadowOpacity(.13)),
      0 9.4px 24px rgba($color, shadowOpacity(.09)),
      0 21.8px 43px rgba($color, shadowOpacity(.08));
  }
}

@mixin euiSlightShadowHover($color: $euiShadowColor) {
  box-shadow:
    0 1px 5px rgba($color, shadowOpacity(.1)),
    0 3.6px 13px rgba($color, shadowOpacity(.07)),
    0 8.4px 23px rgba($color, shadowOpacity(.06)),
    0 23px 35px rgba($color, shadowOpacity(.05));
}

// stylelint-disable color-named
@mixin euiOverflowShadow($direction: 'y', $side: 'both') {
  $hideHeight: $euiScrollBarCornerThin * 1.25;
  $gradient: null;
  $gradientStart:
    transparentize(red, .9) 0%,
    transparentize(red, 0) $hideHeight;
  $gradientEnd:
    transparentize(red, 0) calc(100% - #{$hideHeight}),
    transparentize(red, .9) 100%;
  @if ($side == 'both' or $side == 'start' or $side == 'end') {
    @if ($side == 'both') {
      $gradient: $gradientStart, $gradientEnd;
    } @else if ($side == 'start') {
      $gradient: $gradientStart;
    } @else {
      $gradient: $gradientEnd;
    }
  } @else {
    @warn "euiOverflowShadow() expects side to be 'both', 'start' or 'end' but got '#{$side}'";
  }

  @if ($direction == 'y') {
    mask-image: linear-gradient(to bottom, #{$gradient});
  } @else if ($direction == 'x') {
    mask-image: linear-gradient(to right, #{$gradient});
  } @else {
    @warn "euiOverflowShadow() expects direction to be 'y' or 'x' but got '#{$direction}'";
  }

  // Chrome+Edge has a very bizarre edge case bug where `mask-image` stops working
  // This workaround forces a stacking context on the scrolling container, which
  // hopefully addresses the bug. @see https://github.com/elastic/eui/pull/7855
  transform: translateZ(0);
}