@use "variables" as *;
$prefixes: ("-webkit-", "-moz-", "-ms-", "-o-", "");
$breakpoints: (
  sm_mobile: 420px,
  mobile: 576px,
  tablet: 768px,
  desktop: 992px,
  l_desktop: 1200px,
  xl_desktop: 1440px,
);

// Media Query
@mixin mediaquery($direction, $breakpoint) {
  $breakpoint_value: map-get($breakpoints, $breakpoint);
  @if $direction == max {
    @media (max-width: ($breakpoint_value - 1)) {
      @content;
    }
  }
  @if $direction == min {
    @media (min-width: ($breakpoint_value)) {
      @content;
    }
  }
}

// Transform Mixin
@mixin transform($translate, $rotate: false, $scale: false) {
  @each $prefix in $prefixes {
    #{$prefix}transform: $translate;
    @if $rotate {
      #{$prefix}transform: $rotate;
    }
    @if $scale {
      #{$prefix}transform: $scale;
    }
  }
}

// Transition Mixin
@mixin transition($args...) {
  @each $prefix in $prefixes {
    #{$prefix}transition: $args;
  }
}

// Border Raduis  Mixin
@mixin border_radius($radius_value) {
  @each $prefix in ("-webkit-", "-moz-", "") {
    #{$prefix}border-radius: $radius_value;
  }
}

// Box Shadow Mixin
@mixin box_shadow($x, $y, $blur, $spd, $color) {
  @each $prefix in $prefixes {
    #{$prefix}box-shadow: $x $y $blur $spd $color;
  }
}

// No Box Shadow Mixin
@mixin box_no_shadow {
  @each $prefix in $prefixes {
    #{$prefix}box-shadow: none;
  }
}

//Flex
@mixin flex($direction, $content, $item) {
  display: flex;
  flex-direction: $direction;
  justify-content: $content;
  align-items: $item;
}
