/*!
 * 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.
 */

// Helper mixins

// Useful border shade when dealing with images of unknown color.
@mixin innerBorder($type: 'dark', $borderRadius: 0, $alpha: .1) {
  $color: rgba($ouiColorDarkestShade, $alpha);

  @if $type == 'light' {
    $color: rgba($ouiColorEmptyShade, $alpha);
  }

  position: relative;

  &:after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: $borderRadius;
    content: '';
    pointer-events: none;
    border: 1px solid $color;
  }
}

// Set scroll bar appearance on Chrome (and firefox).
@mixin ouiScrollBar($thumbColor: $ouiColorDarkShade, $trackBackgroundColor: transparent) {
  // Firefox's scrollbar coloring cascades, but the sizing does not,
  // so it's being added to this mixin for allowing support wherever custom scrollbars are
  // sass-lint:disable-block no-misspelled-properties
  scrollbar-width: thin;

  // sass-lint:disable-block no-vendor-prefixes
  &::-webkit-scrollbar {
    width: $ouiScrollBar;
    height: $ouiScrollBar;
  }

  &::-webkit-scrollbar-thumb {
    background-color: transparentize($thumbColor, .5);
    border: $ouiScrollBarCorner solid $trackBackgroundColor;
    background-clip: content-box;
  }

  &::-webkit-scrollbar-corner,
  &::-webkit-scrollbar-track {
    background-color: $trackBackgroundColor;
  }
}

/**
 * 1. Focus rings shouldn't be visible on scrollable regions, but a11y requires them to be focusable.
 *    Browser's supporting `:focus-visible` will still show outline on keyboard focus only.
 *    Others like Safari, won't show anything at all.
 * 2. Force the `:focus-visible` when the `tabindex=0` (is tabbable)
 */

// Just overflow and scrollbars
@mixin ouiYScroll {
  @include ouiScrollBar;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;

  &:focus {
    outline: none; /* 1 */
  }

  &[tabindex='0']:focus:focus-visible {
    outline-style: auto; /* 2 */
  }
}

@mixin ouiXScroll {
  @include ouiScrollBar;
  overflow-x: auto;

  &:focus {
    outline: none; /* 1 */
  }

  &[tabindex='0']:focus:focus-visible {
    outline-style: auto; /* 2 */
  }
}

// The full overflow with shadow
@mixin ouiYScrollWithShadows {
  @include ouiYScroll;
  @include ouiOverflowShadow('y');
}

@mixin ouiXScrollWithShadows {
  @include ouiXScroll;
  @include ouiOverflowShadow('x');
}

// Hiding elements offscreen to only be read by screen reader
@mixin ouiScreenReaderOnly {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  user-select: none;
}

// Specifically target IE11, but not Edge.
@mixin internetExplorerOnly {
  // sass-lint:disable-block no-vendor-prefixes
  @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    @content;
  }
}

// Doesn't have reduced motion turned on
@mixin ouiCanAnimate {
  @media screen and (prefers-reduced-motion: no-preference) {
    @content;
  }
}

// Does have reduced motion turned on
@mixin ouiCantAnimate {
  @media screen and (prefers-reduced-motion: reduce) {
    @content;
  }
}


/* OUI -> EUI Aliases */
@mixin euiScrollBar($thumbColor: $ouiColorDarkShade, $trackBackgroundColor: transparent) { @include ouiScrollBar($thumbColor, $trackBackgroundColor); }
@mixin euiYScroll { @include ouiYScroll; }
@mixin euiXScroll { @include ouiXScroll; }
@mixin euiYScrollWithShadows { @include ouiYScrollWithShadows; }
@mixin euiXScrollWithShadows { @include ouiXScrollWithShadows; }
@mixin euiScreenReaderOnly { @include ouiScreenReaderOnly; }
@mixin euiCanAnimate {
  @include ouiCanAnimate {
    @content;
  }
}
@mixin euiCantAnimate {
  @include ouiCantAnimate {
    @content;
  }
}
/* End of Aliases */