@use 'sass:list';
@use 'sass:map';
@use 'sass:math';

@import 'breakpoints';

// Define los puntos de ruptura si no están definidos
$break-sm: 576px !default;
$break-md: 768px !default;
$break-lg: 992px !default;
$break-xl: 1200px !default;
$min-vw: 320px !default;
$max-vw: 1500px !default;

@mixin background-alpha($color: $color-white, $alpha: 1) {
  background-color: hsla(
    hue($color),
    saturation($color),
    lightness($color),
    $alpha
  );
}

@mixin user-select($select) {
  user-select: $select;
}

@mixin font-light() {
  font-family: $font-family-a-l;
  font-weight: $font-weight-light;
}

@mixin font-regular() {
  font-family: $font-family-a-r;
  font-weight: $font-weight-regular;
}

@mixin font-medium() {
  font-family: $font-family-a-m;
  font-weight: $font-weight-medium;
}

@mixin font-semibold() {
  font-family: $font-family-a-sb;
  font-weight: $font-weight-semibold;
}

@mixin font-bold() {
  font-family: $font-family-a-b;
  font-weight: $font-weight-bold;
}

@mixin font-2-regular() {
  font-family: $font-family-b-r;
}

@mixin font-2-medium() {
  font-family: $font-family-b-m;
}

@mixin font-2-bold() {
  font-family: $font-family-b-b;
}

@mixin font-3-regular() {
  font-family: $font-family-c-r;
}

@mixin font-3-medium() {
  font-family: $font-family-c-m;
}

@mixin font-3-bold() {
  font-family: $font-family-c-b;
}

@mixin fonters($param) {
  @if $param == 'light' {
    @include font-light;
  } @else if $param == 'regular' {
    @include font-regular;
  } @else if $param == 'medium' {
    @include font-medium;
  } @else if $param == 'semibold' {
    @include font-semibold;
  } @else if $param == 'bold' {
    @include font-bold;
  } @else if $param == 'regular2' {
    @include font-2-regular;
  } @else if $param == 'medium2' {
    @include font-2-medium;
  } @else if $param == 'bold2' {
    @include font-2-bold;
  } @else if $param == 'regular3' {
    @include font-3-regular;
  } @else if $param == 'medium3' {
    @include font-3-medium;
  } @else if $param == 'bold3' {
    @include font-3-bold;
  }
}

@mixin typesFixers($headersFixers, $cssattr) {
  @for $i from 1 through 1 {
    @each $name, $fsize in $headersFixers {
      $fontsize: list.nth($fsize, $i);
      $fontheight: list.nth($fsize, 2);
      .text-#{$name}-r {
        @include fonters(regular);

        #{$cssattr}: $fontsize;
        line-height: $fontheight;
      }
      .text-#{$name}-m {
        @include fonters(medium);

        #{$cssattr}: $fontsize;
        line-height: $fontheight;
      }
      .text-#{$name}-b {
        @include fonters(bold);

        #{$cssattr}: $fontsize;
        line-height: $fontheight;
      }
      .text-#{$name}-2r {
        @include fonters('regular2');

        #{$cssattr}: $fontsize;
        line-height: $fontheight;
      }
      .text-#{$name}-2b {
        @include fonters('bold2');

        #{$cssattr}: $fontsize;
        line-height: $fontheight;
      }
    }
  }
}

@mixin random-bgr() {
  background: rgb(random(255) random(255) random(255));
}

@mixin fixed-bgr() {
  background: red;
}

@function unity($value) {
  @return math.div($value, $value * 0 + 1);
}

@mixin typesFluids($headersFluids) {
  @for $i from 1 through 1 {
    @each $name, $fsize in $headersFluids {
      $u1: math.unit($min-vw);
      $u2: math.unit($max-vw);
      $min-font-size: list.nth($fsize, $i);
      $max-font-size: list.nth($fsize, 2);
      $fluid-line-height: list.nth($fsize, 3);
      $u3: math.unit($min-font-size);
      $u4: math.unit($max-font-size);
      $u5: list.nth($fsize, 3);

      .fluid-#{$name}-l {
        @include font-light;

        @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
          & {
            font-size: $min-font-size;
            line-height: $u5;

            @media (min-width: $min-vw) {
              font-size: calc(
                #{$min-font-size} + #{unity($max-font-size - $min-font-size)} *
                  ((100vw - #{$min-vw}) / #{unity($max-vw - $min-vw)})
              );
              line-height: $fluid-line-height;
            }

            @media (min-width: $max-vw) {
              font-size: $max-font-size;
              line-height: $fluid-line-height;
            }
          }
        }
      }

      .fluid-#{$name}-r {
        @include font-regular;

        @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
          & {
            font-size: $min-font-size;
            line-height: $u5;

            @media (min-width: $min-vw) {
              font-size: calc(
                #{$min-font-size} + #{unity($max-font-size - $min-font-size)} *
                  ((100vw - #{$min-vw}) / #{unity($max-vw - $min-vw)})
              );
              line-height: $fluid-line-height;
            }

            @media (min-width: $max-vw) {
              font-size: $max-font-size;
              line-height: $fluid-line-height;
            }
          }
        }
      }

      .fluid-#{$name}-m {
        @include font-medium;

        @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
          & {
            font-size: $min-font-size;
            line-height: $u5;

            @media (min-width: $min-vw) {
              font-size: calc(
                #{$min-font-size} + #{unity($max-font-size - $min-font-size)} *
                  ((100vw - #{$min-vw}) / #{unity($max-vw - $min-vw)})
              );
              line-height: $fluid-line-height;
            }

            @media (min-width: $max-vw) {
              font-size: $max-font-size;
              line-height: $fluid-line-height;
            }
          }
        }
      }

      .fluid-#{$name}-sb {
        @include font-semibold;

        @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
          & {
            font-size: $min-font-size;
            line-height: $u5;

            @media (min-width: $min-vw) {
              font-size: calc(
                #{$min-font-size} + #{unity($max-font-size - $min-font-size)} *
                  ((100vw - #{$min-vw}) / #{unity($max-vw - $min-vw)})
              );
              line-height: $fluid-line-height;
            }

            @media (min-width: $max-vw) {
              font-size: $max-font-size;
              line-height: $fluid-line-height;
            }
          }
        }
      }

      .fluid-#{$name}-b {
        @include font-bold;

        @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
          & {
            font-size: $min-font-size;
            line-height: $u5;

            @media (min-width: $min-vw) {
              font-size: calc(
                #{$min-font-size} + #{unity($max-font-size - $min-font-size)} *
                  ((100vw - #{$min-vw}) / #{unity($max-vw - $min-vw)})
              );
              line-height: $fluid-line-height;
            }

            @media (min-width: $max-vw) {
              font-size: $max-font-size;
              line-height: $fluid-line-height;
            }
          }
        }
      }
    }
  }
}

@mixin ratio($width, $height) {
  position: relative;
  overflow: hidden;

  &::before {
    display: block;
    content: '';
    width: 100%;
    padding-top: math.div($height, $width) * 100%;
  }

  .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .rat-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

@mixin bleed($margin) {
  .bleed-#{$margin} {
    padding: 0 math.div($margin, 2) + px 0 math.div($margin, 2) + px;
    overflow: hidden;

    .container-fluid {
      margin-left: -#{math.div($margin, 2)} + px;
      margin-right: -#{math.div($margin, 2)} + px;
      padding: 0 math.div($margin, 2) + px 0 math.div($margin, 2) + px;
    }

    > .row {
      margin-left: 0;
      margin-right: 0;
      box-sizing: border-box;
      display: flex;
      flex: 0 1 auto;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      flex-flow: row wrap;
      flex-wrap: wrap;
    }

    > [class*='col-'],
    > .col {
      padding: math.div($margin, 2) + px;
      box-sizing: border-box;
    }
  }

  .single {
    flex-basis: 50%;
    max-width: 50%;
  }

  .double {
    flex-basis: 100%;
    max-width: 100%;
  }

  @media (min-width: $break-sm) {
    .single {
      flex-basis: 25%;
      max-width: 25%;
    }

    .double {
      flex-basis: 50%;
      max-width: 50%;
    }
  }
}

@mixin types($breakpoints, $headers, $cssattr) {
  @for $i from 1 through list.length($breakpoints) {
    @media (min-width: list.nth(map.values($breakpoints), $i)) {
      @each $name, $fsize in $headers {
        $fontsize: list.nth($fsize, $i);
        $fontheight: list.nth($fsize, 5);
        $fontweight: list.nth($fsize, 6);
        .#{$name} {
          @if list.nth(map.values($breakpoints), $i) == 1px {
            @include fonters($fontweight);
          }

          #{$cssattr}: $fontsize;
          line-height: $fontheight;
        }
      }
    }
  }
}

@mixin space($breakpoints, $paddings, $cssattr) {
  @for $i from 1 through list.length($breakpoints) {
    @media (min-width: list.nth(map.values($breakpoints), $i)) {
      @each $name, $pad in $paddings {
        $padding: list.nth($pad, $i);
        .#{$name} {
          #{$cssattr}: $padding;
        }
      }
    }
  }
}

@mixin button-variant($color, $background, $border) {
  color: $color;
  background-color: $background;
  border-color: $border;

  &:focus,
  &.focus {
    color: $color;
    background-color: darken($background, 10%);
    border-color: darken($border, 25%);
  }

  &:hover {
    color: $color;
    background-color: darken($background, 10%);
    border-color: darken($border, 12%);
  }

  &:active,
  &.active,
  .open > &.dropdown-toggle {
    background-image: none;
    color: $color;
    background-color: darken($background, 10%);
    border-color: darken($border, 12%);
    &:hover,
    &:focus,
    &.focus {
      color: $color;
      background-color: darken($background, 17%);
      border-color: darken($border, 25%);
    }
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &:hover,
    &:focus,
    &.focus {
      background-color: $background;
      border-color: $border;
    }
  }

  .badge {
    color: $background;
    background-color: $color;
  }
}

@mixin button-size(
  $padding-vertical,
  $padding-horizontal,
  $font-size,
  $line-height,
  $border-radius
) {
  padding: $padding-vertical $padding-horizontal;
  font-size: $font-size;
  line-height: $line-height;
  border-radius: $border-radius;
}

@mixin box-shadow($shadow...) {
  box-shadow: $shadow;
}

@mixin box-sizing($boxmodel) {
  box-sizing: $boxmodel;
}

@mixin content-columns($column-count, $column-gap: $grid-gutter-width) {
  column-count: $column-count;
  column-gap: $column-gap;
}

@mixin tab-focus() {
  border-color: transparent;
  outline: thin dotted;
  box-shadow: none;
  outline-offset: -2px;
}

@mixin calc($property, $expression) {
  #{$property}: -moz-calc(#{$expression});
  #{$property}: -webkit-calc(#{$expression});
  #{$property}: calc(#{$expression});
}

@mixin ellipsis() {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

@mixin appearance() {
  appearance: none;
}

@mixin media($consulta) {
  $media-max-xs: '(max-width: 480px)';
  $media-max-sm: '(max-width: 767px)';
  $media-max-md: '(max-width: 991px)';
  $media-max-lg: '(max-width: 1279px)';

  $media-xxs: '(min-width: 300px)';
  $media-xs: '(min-width: 480px)';
  $media-sm: '(min-width: 768px)';
  $media-md: '(min-width: 992px)';
  $media-md-2: '(min-width: 1025px)';
  $media-lg: '(min-width: 1280px)';
  $media-xl: '(min-width: 1500px)';
  $media-xxl: '(min-width: 1600px)';
  $portrait: '(min-width: 768px) and (max-width: 991px)';
  $landscape: '(min-width: 992px) and (max-width: 1279px)';
  $landscape-2: '(min-width: 1280px) and (max-width: 1560px)';

  @if $consulta == xxs {
    @media #{unquote($media-xxs)} {
      @content;
    }
  } @else if $consulta == max-xs {
    @media #{unquote($media-max-xs)} {
      @content;
    }
  } @else if $consulta == max-sm {
    @media #{unquote($media-max-sm)} {
      @content;
    }
  } @else if $consulta == max-md {
    @media #{unquote($media-max-md)} {
      @content;
    }
  } @else if $consulta == max-lg {
    @media #{unquote($media-max-lg)} {
      @content;
    }
  } @else if $consulta == xs {
    @media #{unquote($media-xs)} {
      @content;
    }
  } @else if $consulta == sm {
    @media #{unquote($media-sm)} {
      @content;
    }
  } @else if $consulta == md {
    @media #{unquote($media-md)} {
      @content;
    }
  } @else if $consulta == md-2 {
    @media #{unquote($media-md-2)} {
      @content;
    }
  } @else if $consulta == lg {
    @media #{unquote($media-lg)} {
      @content;
    }
  } @else if $consulta == xl {
    @media #{unquote($media-xl)} {
      @content;
    }
  } @else if $consulta == xxl {
    @media #{unquote($media-xxl)} {
      @content;
    }
  } @else if $consulta == portrait {
    @media #{unquote($portrait)} {
      @content;
    }
  } @else if $consulta == land {
    @media #{unquote($landscape)} {
      @content;
    }
  } @else if $consulta == land-2 {
    @media #{unquote($landscape-2)} {
      @content;
    }
  } @else if $consulta == retina {
    @media (-webkit-min-device-pixel-ratio: 2),
      (min--moz-device-pixel-ratio: 2),
      (-o-min-device-pixel-ratio: 2/1),
      (min-device-pixel-ratio: 2),
      (min-resolution: 192dpi),
      (min-resolution: 2dppx) {
      @content;
    }
  }
}

@function calculate-rem($size) {
  $remSize: $size / 16px;

  @return $remSize * 1rem;
}

@mixin font-size($size) {
  font-size: $size;
  font-size: calculate-rem($size);
}

@mixin opacity($opacity) {
  opacity: $opacity;

  $opacity-ie: $opacity * 100;

  filter: alpha(opacity=$opacity-ie);
}

$spritegrid: 32;
$spriteWidth: 600;
$spriteHeight: 400;

@mixin placeholder() {
  &::placeholder {
    @content;
  }
  &:input-placeholder {
    @content;
  }
}

@mixin transition($transition, $time, $timing: ease) {
  transition: $transition $time $timing;
}

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

@mixin absolute-vertical-bottom() {
  position: absolute;
  bottom: 10%;
}

@mixin rgba($property, $background: $c-primary, $opacity: 0.75, $mix: white) {
  #{$property}: mix($background, $mix, $opacity * 100%);
  #{$property}: rgba($background, $opacity);
}

@function unicode($str) {
  @return unquote('"') + unquote(str-insert($str, '\\', 1)) + unquote('"');
}

@mixin mintypes($minbreakpoints, $headers, $cssattr) {
  @for $i from 1 through list.length($minbreakpoints) {
    @media (min-width: list.nth(map.values($minbreakpoints), $i)) {
      @each $name, $fsize in $headers {
        $fontsize: list.nth($fsize, $i);
        $fontheight: list.nth($fsize, 3);
        $fontweight: list.nth($fsize, 4);
        .#{$name} {
          @if list.nth(map.values($minbreakpoints), $i) == 1px {
            @include fonters($fontweight);
          }

          #{$cssattr}: $fontsize;
          line-height: $fontheight;
        }
      }
    }
  }
}

@mixin heights-mix() {
  @each $height-name in map.keys($heights) {
    $values: map.get($heights, $height-name);
    .#{$height-name} {
      min-height: list.nth($values, 1);

      @media (min-width: $break-sm) {
        min-height: list.nth($values, 2);
      }
    }
  }
}