// sass-lint:disable-block indentation, no-color-keywords

// SASSTODO: Create this in EUI
@mixin lnsOverflowShadowHorizontal {
  $hideHeight: $euiScrollBarCorner * 1.25;
  mask-image: linear-gradient(
    to right,
    transparentize($euiColorDanger, .9) 0%,
    transparentize($euiColorDanger, 0) $hideHeight,
    transparentize($euiColorDanger, 0) calc(100% - #{$hideHeight}),
    transparentize($euiColorDanger, .9) 100%
  );
}

// Removes EUI focus ring
@mixin removeEuiFocusRing {
  outline: none;

  &:focus-visible {
    outline-style: none;
  }
}

// Passes focus ring styles down to a child of a focused element
@mixin passDownFocusRing($target) {
  @include removeEuiFocusRing;

  #{$target} {
    @include euiFocusBackground;
    outline: $euiFocusRingSize solid currentColor; // Safari & Firefox
  }

  &:focus-visible #{$target} {
    outline-style: auto; // Chrome
  }

  &:not(:focus-visible) #{$target} {
    outline: none;
  }
}

@mixin euiFlyout {
  border-left: $euiBorderThin;
  // The mixin augments the above
  // sass-lint:disable mixins-before-declarations
  @include euiBottomShadowLarge;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  z-index: $euiZFlyout;
  background: $euiColorEmptyShade;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  clip-path: polygon(-50% 0, 100% 0, 100% 100%, -50% 100%);
}

@keyframes euiFlyoutAnimation {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }

  75% {
    opacity: 1;
    transform: translateX(0%);
  }
}