@import 'variables';

@function hidden-animated-transition($duration) {
  @return opacity $duration, visibility 0s;
}

@mixin hidden {
  &.#{$prefix}-hidden {
    display: none;
  }
}

@mixin hidden-animated($duration: $animation-duration) {
  opacity: 1;
  transition: hidden-animated-transition($duration);
  visibility: visible;

  &.#{$prefix}-hidden {
    opacity: 0;
    transition:
      opacity $duration,
      visibility $duration;
    visibility: hidden;
  }
}

@mixin hidden-animated-focusable($duration: $animation-duration) {
  opacity: 1;
  transition: hidden-animated-transition($duration);

  &.#{$prefix}-hidden {
    opacity: 0;
    transition: opacity $duration;
  }
}

/*
 * this will use the existing `hidden-animated` mixin and add additional transitions properties
 *
 * Example:
 * @include hidden-animated-with-additional-transitions($animation-duration,
 *         (
 *                 height: (.35s, cubic-bezier(.4, 0, .2, 1)),
 *                 width: (.35s, cubic-bezier(.4, 0, .2, 1))
 *         )
 * );
 */
@mixin hidden-animated-with-additional-transitions($duration: $animation-duration, $transitions: ()) {
  $transitions-string: hidden-animated-transition($duration);
  @each $property, $property-options in $transitions {
    $property-settings: $property;
    @each $option in $property-options {
      $property-settings: $property-settings $option;
    }
    $transitions-string: $transitions-string, $property-settings;
  }

  @include hidden-animated($duration);
  transition: $transitions-string;
}

// Cover the whole parent element
@mixin layout-cover {
  height: 100%;
  left: 0;
  margin: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

// Align to parent's bottom
@mixin layout-align-bottom {
  bottom: 0;
  position: absolute;
  width: 100%;
}

// Align to parent's top
@mixin layout-align-top {
  position: absolute;
  top: 0;
  width: 100%;
}

@function safe-area-inset($edge) {
  @return env(safe-area-inset-#{$edge}, 0);
}

@function safe-area-max($value, $edge) {
  @return max($value, safe-area-inset($edge));
}

@mixin animate-slide-in-from-bottom($max-height, $duration: $animation-duration, $inner-selector: '') {
  // Animate show
  & #{$inner-selector} {
    max-height: $max-height;
    transition: max-height $duration ease-in;
  }

  // Animate hide
  // sass-lint:disable force-element-nesting
  &.#{$prefix}-hidden #{$inner-selector} {
    max-height: 0;
    transition: max-height $duration ease-out;
  }
}

@mixin text-border($color: $color-primary) {
  // Shift shadow in all 8 directions to get a homogeneous stroke around the text (works only for 1px width)
  text-shadow:
    -1px -1px 0 $color,
    0 -1px 0 $color,
    1px -1px 0 $color,
    -1px 0 0 $color,
    1px 0 0 $color,
    -1px 1px 0 $color,
    0 1px 0 $color,
    1px 1px 0 $color;
}

@mixin svg-icon-shadow {
  filter: drop-shadow(0 0 0.25px $color-primary);
}

// Use this mixin in `&:after` or `:before` to increase the hit area without increasing the visible size
@mixin invisible-hit-area($top, $right, $bottom, $left) {
  content: '';
  position: absolute;
  display: block;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

@mixin seekbar-position-marker($marker-dimension) {
  height: $marker-dimension;
  left: -$marker-dimension * 0.5;
  width: $marker-dimension;
  &:after {
    $inset: calc(-1 * $font-size / 3);
    @include invisible-hit-area($inset, $inset, $inset, $inset);
    border-radius: 100%;
    // Uncomment to expose hit area for debugging
    // background-color: rgba(red, 0.5);
  }
}

@mixin focusable($inset: false, $border-radius: 0.3em, $focus-element-box-shadow: 0 0 0 0.1em rgba($color-focus, 0.4)) {
  &:focus {
    outline: none;
  }

  &.#{$prefix}-focus-visible {
    @if $inset == false {
      box-shadow: $focus-element-box-shadow;
    } @else {
      box-shadow: inset $focus-element-box-shadow;
    }

    background-color: $color-focus;
    backdrop-filter: blur(5px);
    border-radius: $border-radius;
    outline: none;
  }
}

/// Creates a gradient background from transparent to the gradient start color
/// @param {String} $direction - Direction of the gradient (e.g., 'to bottom', 'to top')
/// @param {Color} $start-color ($color-background-gradient-start) - The color to gradient to
@mixin background-gradient($direction, $start-color: $color-background-gradient-start) {
  background: linear-gradient($direction, $color-transparent, $start-color);
}

/// Replace `$search` with `$replace` in `$string`. From https://css-tricks.com/snippets/sass/str-replace-function/
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to replace
/// @param {String} $replace ('') - New value
/// @return {String} - Updated string
@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace +
      str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}