/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

// 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 ouiSlightShadow($color: $ouiShadowColor, $opacity: .3) {
  box-shadow: 0 2px 2px -1px rgba($color, $opacity);
}

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

@mixin ouiBottomShadowMedium($color: $ouiShadowColor, $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 ouiBottomShadowFlat($color: $ouiShadowColor, $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 ouiBottomShadow($color: $ouiShadowColorLarge, $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($ouiBorderColor) < 50)) {
    border-color: tint($color, 75%);
    border-top-color: tint($color, 80%);
    border-bottom-color: tint($color, 55%);
  }
}

@mixin ouiBottomShadowLarge(
  $color: $ouiShadowColorLarge,
  $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($ouiBorderColor) < 50)) {
    border-color: tint($color, 70%);
    border-top-color: tint($color, 85%);
    border-bottom-color: tint($color, 55%);
  }
}

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

@mixin ouiSlightShadowActive($color: $ouiShadowColor, $opacity: .3) {
  @include ouiSlightShadowHover($color, $opacity);
}

@mixin ouiOverflowShadow($direction: 'y', $side: 'both') {
  $hideHeight: $ouiScrollBarCorner * 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 "ouiOverflowShadow() 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 "ouiOverflowShadow() expects direction to be 'y' or 'x' but got '#{$direction}'";
  }
}


/* OUI -> EUI Aliases */
@mixin euiSlightShadow($color: $ouiShadowColor, $opacity: .3) { @include ouiSlightShadow($color, $opacity); }
@mixin euiBottomShadowSmall($color: $ouiShadowColor, $opacity: .3) { @include ouiBottomShadowSmall($color, $opacity); }
@mixin euiBottomShadowMedium($color: $ouiShadowColor, $opacity: .2) { @include ouiBottomShadowMedium($color, $opacity); }
@mixin euiBottomShadowFlat($color: $ouiShadowColor, $opacity: .2) { @include ouiBottomShadowFlat($color, $opacity); }
@mixin euiBottomShadow($color: $ouiShadowColorLarge, $opacity: .1, $adjustBorders: false) { @include ouiBottomShadow($color, $opacity, $adjustBorders); }
@mixin euiBottomShadowLarge(
  $color: $ouiShadowColorLarge,
  $opacity: .1,
  $adjustBorders: false,
  $reverse: false
) {
  @include ouiBottomShadowLarge(
    $color,
    $opacity,
    $adjustBorders,
    $reverse
  );
}
@mixin euiSlightShadowHover($color: $ouiShadowColor, $opacity: .3) { @include ouiSlightShadowHover($color, $opacity); }
@mixin euiSlightShadowActive($color: $ouiShadowColor, $opacity: .3) { @include ouiSlightShadowActive($color, $opacity); }
@mixin euiOverflowShadow($direction: 'y', $side: 'both') { @include ouiOverflowShadow($direction, $side); }
/* End of Aliases */