@use 'sass:math';
@use 'sass:color';
@use 'sass:list';
@use 'sass:map';
@use 'sass:string';
@use 'breakpoints';
@use 'fonts';
@use 'setup';

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

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

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

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

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

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

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

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

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

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

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

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

@mixin font-3-bold() {
  font-family: fonts.$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== '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($minheadersFixers, $cssattr) {
  @for $i from 1 through 1 {
    @each $name, $fsize in $minheadersFixers {
      $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(math.random(255) math.random(255) math.random(255));
}

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

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

@mixin typesFluids($minheadersFluids) {
  @for $i from 1 through 1 {
    @each $name, $fsize in $minheadersFluids {
      $u1: math.unit(setup.$min-vw);
      $u2: math.unit(setup.$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: setup.$min-vw) {
              font-size: calc(
                #{$min-font-size} + #{unity($max-font-size - $min-font-size)} *
                  ((100vw - #{setup.$min-vw}) / #{unity(setup.$max-vw - setup.$min-vw)})
              );
              line-height: $fluid-line-height;
            }

            @media (min-width: setup.$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: setup.$min-vw) {
              font-size: calc(
                #{$min-font-size} + #{unity($max-font-size - $min-font-size)} *
                  ((100vw - #{setup.$min-vw}) / #{unity(setup.$max-vw - setup.$min-vw)})
              );
              line-height: $fluid-line-height;
            }

            @media (min-width: setup.$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: setup.$min-vw) {
              font-size: calc(
                #{$min-font-size} + #{unity($max-font-size - $min-font-size)} *
                  ((100vw - #{setup.$min-vw}) / #{unity(setup.$max-vw - setup.$min-vw)})
              );
              line-height: $fluid-line-height;
            }

            @media (min-width: setup.$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: setup.$min-vw) {
              font-size: calc(
                #{$min-font-size} + #{unity($max-font-size - $min-font-size)} *
                  ((100vw - #{setup.$min-vw}) / #{unity(setup.$max-vw - setup.$min-vw)})
              );
              line-height: $fluid-line-height;
            }

            @media (min-width: setup.$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: setup.$min-vw) {
              font-size: calc(
                #{$min-font-size} + #{unity($max-font-size - $min-font-size)} *
                  ((100vw - #{setup.$min-vw}) / #{unity(setup.$max-vw - setup.$min-vw)})
              );
              line-height: $fluid-line-height;
            }

            @media (min-width: setup.$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;
      -webkit-box-flex: 0;
      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: breakpoints.$break-sm) {
    .single {
      flex-basis: 25%;
      max-width: 25%;
    }

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

@mixin types($breakpoints, $minheaders, $cssattr) {
  @for $i from 1 through list.length($breakpoints) {
    @media (min-width: list.nth(map.values($breakpoints), $i)) {
      @each $name, $fsize in $minheaders {
        $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: color.adjust($background, $lightness: -10%);
    border-color: color.adjust($border, $lightness: -25%);
  }

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

  &:active,
  &.active,
  .open > &.dropdown-toggle {
    background-image: none;
    color: $color;
    background-color: color.adjust($background, $lightness: -10%);
    border-color: color.adjust($border, $lightness: -12%);
    &:hover,
    &:focus,
    &.focus {
      color: $color;
      background-color: color.adjust($background, $lightness: -17%);
      border-color: color.adjust($border, $lightness: -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 #{$media-xxs} {
      @content;
    }
  } @else if $consulta==max-xs {
    @media #{$media-max-xs} {
      @content;
    }
  } @else if $consulta==max-sm {
    @media #{$media-max-sm} {
      @content;
    }
  } @else if $consulta==max-md {
    @media #{$media-max-md} {
      @content;
    }
  } @else if $consulta==max-lg {
    @media #{$media-max-lg} {
      @content;
    }
  } @else if $consulta==xs {
    @media #{$media-xs} {
      @content;
    }
  } @else if $consulta==sm {
    @media #{$media-sm} {
      @content;
    }
  } @else if $consulta==md {
    @media #{$media-md} {
      @content;
    }
  } @else if $consulta==md-2 {
    @media #{$media-md-2} {
      @content;
    }
  } @else if $consulta==lg {
    @media #{$media-lg} {
      @content;
    }
  } @else if $consulta==xl {
    @media #{$media-xl} {
      @content;
    }
  } @else if $consulta==xxl {
    @media #{$media-xxl} {
      @content;
    }
  } @else if $consulta==portrait {
    @media #{$portrait} {
      @content;
    }
  } @else if $consulta==land {
    @media #{$landscape} {
      @content;
    }
  } @else if $consulta==land-2 {
    @media #{$landscape-2} {
      @content;
    }
  } @else if $consulta == retina {
    @media only screen and (-webkit-min-device-pixel-ratio: 2),
      only screen and (min--moz-device-pixel-ratio: 2),
      only screen and (-o-min-device-pixel-ratio: 2/1),
      only screen and (min-device-pixel-ratio: 2),
      only screen and (min-resolution: 192dpi),
      only screen and (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() {
  &::input-placeholder {
    @content;
  }
  &:placeholder {
    @content;
  }
  &::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: #000000, $opacity: 0.75, $mix: white) {
  #{$property}: color.mix($background, $mix, $opacity * 100%);
  #{$property}: rgba($background, $opacity);
}

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

@mixin mintypes($minbreakpoints, $minheaders, $cssattr) {
  @for $i from 1 through list.length($minbreakpoints) {
    @media (min-width: list.nth(map.values($minbreakpoints), $i)) {
      @each $name, $fsize in $minheaders {
        $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 debug-types($minheaders) {
  @for $i from 1 through list.length($minheaders) {
    .#{list.nth(map.keys($minheaders), $i)} {
      position: relative;
      border: 1px solid #96c3ac;
      &::after {
        content: '#{list.nth(map.keys($minheaders), $i)} ' !important;
        position: absolute;

        @include fixed-bgr;

        opacity: 0.8;
        white-space: nowrap;
        color: setup.$c-white;
        padding: 2px;
        left: 0;
        font-size: 10px;
        font-weight: bold;
      }
    }
  }
}

@mixin heights-mix() {
  @each $height-name in map.keys(setup.$heights) {
    $values: map.get(setup.$heights, $height-name);
    $val-desktop: list.nth($values, 1);
    @if list.length($values) >= 2 {
      $val-desktop: list.nth($values, 2);
    }
    .#{$height-name} {
      min-height: list.nth($values, 1);

      @media (min-width: breakpoints.$break-sm) {
        min-height: $val-desktop;
      }
    }
  }
}