// Mixin reusável de Direção
@mixin flex-direction($direction, $breakpoint: null) {
  $class-name: if($breakpoint, "flex-#{$breakpoint}-#{$direction}", "flex-#{$direction}");

  .#{$class-name} {
    flex-direction: #{$direction};
  }
}

// Mixin reusável de Justify content, Align items e Align Self
@mixin flex-property($property, $key, $value, $breakpoint: null) {
  $class-name: if($breakpoint, "#{$property}-#{$breakpoint}-#{$key}", "#{$property}-#{$key}");

  .#{$class-name} {
    #{$property}: #{$value};
  }
}

// Mixin reusável para Grow e Shrink
@mixin flex-sizing($property, $value, $breakpoint: null) {
  $class-name: if($breakpoint, "#{$property}-#{$breakpoint}-#{$value}", "#{$property}-#{$value}");

  .#{$class-name} {
    #{$property}: #{$value};
  }
}

// Mixin reusável para Order
@mixin flex-order($key, $value, $breakpoint: null) {
  $class-name: if($breakpoint, "order-#{$breakpoint}-#{$key}", "order-#{$key}");

  .#{$class-name} {
    order: #{$value};
  }
}

// Mixin reusável para Gap
@mixin flex-gap($key, $value, $breakpoint: null) {
  $class-name: if($breakpoint, "gap-#{$breakpoint}-#{$key}", "gap-#{$key}");

  .#{$class-name} {
    gap: #{$value};
  }
}