// Update: 20250223
@use "sass:math";
@use "sass:map";
@use "./vendor" as *;

// autofill
@mixin autofill($background, $color) {
    &:-webkit-autofill,
    &:-webkit-autofill:hover,
    &:-webkit-autofill:focus
    {
        @include box-shadow(inset 0 0 0 1000px $background);
        @include transition(background-color 5000s ease-in-out 0);
        -webkit-text-fill-color: $color;
    }
}

// Text.
@mixin text(
    $aling: left,
    $trans: none,
    $decor: none
) {
    text: {
        align      : $aling;
        decoration : $decor;
        transform  : $trans;
    }
}

// Font
@mixin font (
    $size: 1em,
    $family: $f1,
    $weight: normal,
    $style: normal,
    $line-height: "none",
    $variant: normal
) {
    font: {
        size   : $size;
        family : $family;
        weight : $weight;
        style  : $style;
        variant: $variant
    }

    @if $line-height != "none" { line-height: $line-height; }
}

// Background
@mixin background ($attr: ()) {
    $way: mapv($attr, url, "");
    $repeat: mapv($attr, repeat, no-repeat);
    $position: mapv($attr, position, center);
    $color: mapv($attr, color, transparent);
    $size: mapv($attr, size, auto);
    $image: mapv($attr, image, "");

    background: {
        @if $way != ""   { image: url($way); }
        @if $image != "" { image: $image; }

        repeat   : $repeat;
        position : $position;
        color    : $color;
        size     : $size;
    }
}

// Position
@mixin position(
    $position: relative,
    $value_1: 0,
    $value_2: 0,
    $posit_1: top,
    $posit_2: left
) {
    position : $position;
    #{$posit_1} : $value_1;
    #{$posit_2} : $value_2;
}

// Background-color and Color
@mixin bc($background: $c1, $color: $c2) {
    background-color: $background;
    color: $color;
}

// Width Height
@mixin wh($width: auto, $height: auto) {
    width  : $width;
    height : $height;
}

// Width and height equal
@mixin whs($value_aa: auto) {
    width  : $value_aa;
    height : $value_aa;
}

// Include svg inline (Need gulp-postcss and postcss-inline-svg)
@mixin icon_svg($svg, $w, $h, $fill: "none", $def: "none") {
    @include position(absolute);
    @include wh($w, $h);
    $path_svg: $i1 +  $svg + ".svg";
    background: {
        @if $fill == "inline" {
            image: svg-inline($def);
        } @else if $fill != "none"  {
            image: svg-load($path_svg, fill=$fill);
        } @else {
            image: url($path_svg);
        }
        repeat: no-repeat;
        size: 100%;
        position: top left;
        color: transparent;
    };
}

// background opacity
@mixin background-opacity($color: $c1, $opacity: 0.8) {
    background-color: $color;
    background-color: rgba($color, $opacity);
}

// Imagen remplace
@mixin img-remplace($image, $iw, $ih) {
    @include background(
        $image,
        no-repeat, center,
        $c0, cover
    );
    @include wh($iw, $ih);
    @include ht;
}

// no margins
@mixin no-margins {
    margin: 0;
    margin: {
        top    : 0;
        bottom : 0;
        left   : 0;
        right  : 0;
    }
    padding: 0;
    padding: {
        top    : 0;
        bottom : 0;
        left   : 0;
        right  : 0;
    }
}

// no border
@mixin no-border {
    border: 0 none transparent;
    border: {
        top    : 0 none transparent;
        bottom : 0 none transparent;
        left   : 0 none transparent;
        right  : 0 none transparent;
    }
}

// hide text
@mixin ht {
    @include no-margins;
    text-indent: -119988px;
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
}

// Horizontal and vertical centering
@mixin hv-center {
    @include position(absolute, 50%, 50%);
    @include transform(translate(-50%, -50%));
}

// Horizontal and vertical centering with flex for column
@mixin center-flex-column {
    @include flex-direction(column);
    @include flex;
    place-content: center;
    place-items: center;
}

// Horizontal and vertical centering with flex for row
@mixin center-flex-row {
    @include flex-direction;
    @include flex;
    place-content: center;
    place-items: center;
}

// Aspect ratio
@mixin aspect-ratio($width: 100vw, $aspect-ratio: 1.77) {
    --size: #{$width};
    --aspect-ratio: #{$aspect-ratio};

    width: var(--size);
    height: calc(var(--size) / var(--aspect-ratio));
    aspect-ratio: $aspect-ratio;
}

//Rem
@function szrem($value_px: 14, $base: 16) {
    @return (math.div($value_px, $base)) * 1rem;
}

// =================
// 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 woff2 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;
        src: $src;
        font-display: swap;
    }
}

// Keyframes
@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}

// Placeholder
@mixin placeholder {
    &::-ms-input-placeholder { @content; }
    &:-moz-placeholder { @content; }
    &::-moz-placeholder { @content; }
    &::-webkit-input-placeholder { @content; }
    &::placeholder { @content; }
}

// Mapping lists with default value
@function mapv($map, $key, $value) {
    $return: $value;
    @if map.has-key($map, $key) {
        $return: map.get($map, $key);
    }
    @return $return;
}

// Add scroll
@mixin scroll($attr: ()) {
    $co: mapv($attr, color, white);
    $bg: mapv($attr, bg, black);
    $wi: mapv($attr, width, 15px);
    $bdr: mapv($attr, radius, 10px);
    $dir: mapv($attr, direction, "v");

    @include position;

    @if $dir == "v" {
        overflow: overlay;
        overflow-x: hidden;
    } @else if $dir == "h"  {
        overflow: overlay;
        overflow-y: hidden;
    } @else {
        overflow-x: auto;
        overflow-y: auto;
    }

    &::-webkit-scrollbar {
        @include appearance;
        @include wh($wi);
        background-color: $bg;
    }

    &::-webkit-scrollbar-thumb {
        @include border-radius($bdr);
        background-color: $co;
    }

    &::-webkit-scrollbar-track {
        @include border-radius($bdr);
    }
}

// Text gradient
@mixin gradient-text($grad) {
    @include linear-gradient($grad);
    @include background-clip(text);
    @include text-fill-color(transparent);
    display: inline-block;
}

// percentage base
@function bp($attr: ()) {
    $base_i: mapv($attr, initial_base, 1920);
    $unn: mapv($attr, units, "vw");
    $value: mapv($attr, value, 0);

    @return #{math.div($value * 100, $base_i) + $unn};
}

// Remove unit of measurement from a value
@function strip-unit($value) {
    @return math.div($value, $value * 0 + 1);
}

// Fluid Font and Measures
@mixin fluid-type($attr: ()) {
    $min_s: mapv($attr, mins, 320px);
    $max_s: mapv($attr, maxs, 1920px);
    $min_v: mapv($attr, minv, 14px);
    $max_v: mapv($attr, maxv, 24px);
    $attre: mapv($attr, attr, font-size);

    $u1: unit($min_s);
    $u2: unit($max_s);
    $u3: unit($min_v);
    $u4: unit($max_v);

    @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
        @include brp(strip-unit($max_s)) {
            #{$attre}: calc(#{$min_v} + #{strip-unit($max_v - $min_v)} * ((100vw - #{$min_s}) / #{strip-unit($max_s - $min_s)}));
        }

        @include brp(strip-unit($min_s)) {
            #{$attre}: $min_v;
        }
    } @else {
        @debug "No fueron enviadas las unidades para fluid-type"
    }
}

// Gap for flex
@mixin gap($br) {
    grid-gap: $br;
    gap: $br;
}

// Normalize the styles for working with SVG files
@mixin normalize-svg($attr: ()) {
    $width: mapv($attr, width, auto);
    $height: mapv($attr, height, auto);
    $position: mapv($attr, position, relative);
    $x: mapv($attr, x, 0);
    $y: mapv($attr, y, 0);
    $yaxis: mapv($attr, yaxis, top);
    $xaxis: mapv($attr, xaxis, left);
    $z: mapv($attr, z, 2);

    @include ht;
    @include wh($width, $height);
    @include position(
        $position,
        $y, $x,
        $yaxis, $xaxis
    );
    z-index: $z;
}


// Image cover
%img_cover {
    @include whs(100%);
    object-fit: cover;
}

// Image contain
%img_contain {
    @include whs(100%);
    object-fit: contain;
}
//-----------------------------------
//End Mixin
//-----------------------------------