// =============================================================================
// String Replace
// =============================================================================

@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;
}

// =============================================================================
// Font Face
// =============================================================================

@mixin font-face(
  $name,
  $path,
  $weight: null,
  $style: null,
  $exts: eot woff ttf svg
) {
  $src: null;

  $extmods: (
    eot: "?",
    svg: "#" + str-replace($name, " ", "_")
  );

  $formats: (
    otf: "opentype",
    ttf: "truetype"
  );

  @each $ext in $exts {
    $extmod: if(
      map-has-key($extmods, $ext),
      $ext + map-get($extmods, $ext),
      $ext
    );
    $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
    $src: append(
      $src,
      url(quote($path + "." + $extmod)) format(quote($format)),
      comma
    );
  }

  @font-face {
    font-family: quote($name);
    font-style: $style;
    font-weight: $weight;
    font-display: swap;
    src: $src;
  }
}

@mixin object-fit($fit: fill, $position: null) {
  -o-object-fit: $fit;
  object-fit: $fit;
  @if $position {
    -o-object-position: $position;
    object-position: $position;
    font-family: "object-fit: #{$fit}; object-position: #{$position}";
  } @else {
    font-family: "object-fit: #{$fit}";
  }
}

@mixin font-size-block($fSize: 16px, $lHeight: inherit, $fWeight: 400) {
  font-size: $fSize;
  line-height: $lHeight;
  font-weight: $fWeight;
}

@mixin border-radius($val...) {
  border-radius: $val;
}

@mixin item-v-center() {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

@mixin item-g-center() {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

@mixin animate() {
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out,
    border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out,
    opacity 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

@mixin animate-transform() {
  transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
}

@mixin box-shadow-block($top: 0, $right: 0, $bottom: 0, $left: 0) {
  box-shadow: rgba(0, 0, 0, 0.1) $top $right $bottom $left;
}
