// This file uses RGBA literal values responsibly
// This file uses off-pattern indentation to be more readable

// sass-lint:disable no-color-literals, no-color-keywords, indentation, quotes

@mixin euiSlightShadow($color: $euiShadowColor, $opacity: .3) {
  box-shadow: 0 2px 2px -1px rgba($color, $opacity);
}

@mixin euiBottomShadowSmall($color: $euiShadowColor, $opacity: .3) {
  box-shadow:
    0 2px 2px -1px rgba($color, $opacity),
    0 1px 5px -2px rgba($color, $opacity);
}

@mixin euiBottomShadowMedium($color: $euiShadowColor, $opacity: .2) {
  box-shadow:
    0 6px 12px -1px rgba($color, $opacity),
    0 4px 4px -1px rgba($color, $opacity),
    0 2px 2px 0 rgba($color, $opacity);
}

// Similar to shadow medium but without the bottom depth. Useful for popovers
// that drop UP rather than DOWN.
@mixin euiBottomShadowFlat($color: $euiShadowColor, $opacity: .2) {
  box-shadow:
    0 0 12px -1px rgba($color, $opacity),
    0 0 4px -1px rgba($color, $opacity),
    0 0 2px 0 rgba($color, $opacity);
}

// adjustBorder allows the border color to match the drop shadow better so that there's better
// distinction between element bounds and the shadow (crisper borders)
@mixin euiBottomShadow($color: $euiShadowColorLarge, $opacity: .1, $adjustBorders: false) {
  box-shadow:
    0 12px 24px 0 rgba($color, $opacity),
    0 6px 12px 0 rgba($color, $opacity),
    0 4px 4px 0 rgba($color, $opacity),
    0 2px 2px 0 rgba($color, $opacity);

  // Never adjust borders if the border color is already on the dark side (dark theme)
  @if ($adjustBorders and not (lightness($euiBorderColor) < 50)) {
    border-color: tint($color, 75%);
    border-top-color: tint($color, 80%);
    border-bottom-color: tint($color, 55%);
  }
}

@mixin euiBottomShadowLarge(
  $color: $euiShadowColorLarge,
  $opacity: .1,
  $adjustBorders: false,
  $reverse: false
) {
  @if ($reverse) {
    box-shadow:
      0 -40px 64px 0 rgba($color, $opacity),
      0 -24px 32px 0 rgba($color, $opacity),
      0 -16px 16px 0 rgba($color, $opacity),
      0 -8px 8px 0 rgba($color, $opacity);
  } @else {
    box-shadow:
      0 40px 64px 0 rgba($color, $opacity),
      0 24px 32px 0 rgba($color, $opacity),
      0 16px 16px 0 rgba($color, $opacity),
      0 8px 8px 0 rgba($color, $opacity),
      0 4px 4px 0 rgba($color, $opacity),
      0 2px 2px 0 rgba($color, $opacity);
  }

  // Never adjust borders if the border color is already on the dark side (dark theme)
  @if ($adjustBorders and not (lightness($euiBorderColor) < 50)) {
    border-color: tint($color, 70%);
    border-top-color: tint($color, 85%);
    border-bottom-color: tint($color, 55%);
  }
}

@mixin euiSlightShadowHover($color: $euiShadowColor, $opacity: .3) {
  box-shadow:
    0 4px 8px 0 rgba($color, $opacity/2),
    0 2px 2px -1px rgba($color, $opacity);
}

@mixin euiSlightShadowActive($color: $euiShadowColor, $opacity: .3) {
  @include euiSlightShadowHover($color, $opacity);
}

@mixin euiOverflowShadow($direction: 'y', $side: 'both') {
  $hideHeight: $euiScrollBarCorner * 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}'";
  }
}