// -----------------------------------------------------------------------------
// This file contains all application-wide Sass mixins.
// -----------------------------------------------------------------------------

/*=====================****===================== */
/* browser prefix adding  */
@mixin add-prefix($prop, $value...) {
  -webkit-#{$prop}: #{$value};
  -moz-#{$prop}: #{$value};
  -ms-#{$prop}: #{$value};
  -o-#{$prop}: #{$value};
  #{$prop}: #{$value};
}

@mixin display($value) {
  display: -webkit-#{$value};
  display: -ms-#{$value};
  display: $value;
}

@mixin align-items($value) {
  -webkit-box-align: $value;
  -ms-flex-align: $value;
  align-items: $value;
}

@mixin justify-content($value) {
  -webkit-box-pack: $value;
  -ms-flex-pack: $value;
  justify-content: $value;
}
@mixin flex-direction($value) {
  $prefixes: (-webkit-, -ms-);
  flex-direction: $value;
  @each $prefix in $prefixes {
    #{$prefix}flex-direction: $value;
    @if $prefix == -webkit- {
      @if $value == column {
        #{$prefix}box-orient: vertical;
        #{$prefix}box-direction: normal;
      } @else if $value == row {
        #{$prefix}box-orient: horizontal;
        #{$prefix}box-direction: normal;
      } @else if $value == row-reverse {
        #{$prefix}box-orient: horizontal;
        #{$prefix}box-direction: reverse;
      } @else if $value == column-reverse {
        #{$prefix}box-orient: vertical;
        #{$prefix}box-direction: reverse;
      }
    }
  }
}

@mixin flex-grow($value) {
  -webkit-box-flex: $value;
  -ms-flex-positive: $value;
  flex-grow: $value;
}

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}
//  transition
@mixin transition($transitions) {
  -webkit-transition: $transitions;
  -moz-transition: $transitions;
  -o-transition: $transitions;
  -ms-transition: $transitions;
  transition: $transitions;
}
@mixin delay($value) {
  -webkit-transition-delay: $value;
  -o-transition-delay: $value;
  transition-delay: $value;
}

//  transform property
@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

//  text gradient color
@mixin gradient-text {
  background-clip: content-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
// @mixin background-image($img, $background-position, $background-color) {
//   background-image: url("#{$bnr-image-path}/#{$img}");
//   background-repeat: no-repeat;
//   background-position: $background-position;
// }
@mixin background-image(
  $folder: images,
  $img: file,
  $type: png,
  $opacty-color,
  $repeat: no-repeat
) {
  background: url(../images/#{$folder}/#{$img}.#{$type}) #{$opacty-color};
  background-repeat: #{$repeat};
  background-position: center;
  background-size: cover;
  background-blend-mode: darken;
  @content;
}

//  transform property
@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
//line-clamp
@mixin line-clamp($lines) {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $lines;
}

//Responsive Breakpoints

@mixin breakpoint($point) {
  @if $point==sm {
    @media only screen and (min-width: 576px) {
      @content;
    }
  } @else if $point==max-xsm {
    @media only screen and (max-width: 320.98px) {
      @content;
    }
  } @else if $point==max-sm {
    @media only screen and (max-width: 575.98px) {
      @content;
    }
  } @else if $point==md {
    @media only screen and (min-width: 768px) {
      @content;
    }
  } @else if $point==max-md {
    @media only screen and (max-width: 767.98px) {
      @content;
    }
  } @else if $point==lg {
    @media only screen and (min-width: 992px) {
      @content;
    }
  } @else if $point==max-lg {
    @media only screen and (max-width: 991.98px) {
      @content;
    }
  } @else if $point==mlg {
    @media only screen and (min-width: 1024px) {
      @content;
    }
  } @else if $point==max-mlg {
    @media only screen and (max-width: 1023.98px) {
      @content;
    }
  } @else if $point==xl {
    @media only screen and (min-width: 1200px) {
      @content;
    }
  } @else if $point==max-xl {
    @media only screen and (max-width: 1199.98px) {
      @content;
    }
  } @else if $point==xxl {
    @media only screen and (min-width: 1400px) {
      @content;
    }
  } @else if $point==max-xxl {
    @media only screen and (max-width: 1439.98px) {
      @content;
    }
  } @else if $point==xxxl {
    @media only screen and (min-width: 1600px) {
      @content;
    }
  } @else if $point==max-xxxl {
    @media only screen and (max-width: 1599.98px) {
      @content;
    }
  } @else if $point==xxxxl {
    @media only screen and (min-width: 1700px) {
      @content;
    }
  } @else if $point==max-xxxxl {
    @media only screen and (max-width: 1699.98px) {
      @content;
    }
  } @else if $point==5xl {
    @media only screen and (min-width: 1800px) {
      @content;
    }
  } @else if $point==max-5xl {
    @media only screen and (max-width: 1999.98px) {
      @content;
    }
  }
}
@mixin hover {
  @media not all and (pointer: coarse) {
    &:hover {
      @content;
    }
  }
}
