@use "../abstract/mixins" as *;

$display-utilities: (
  "none": none,
  "block": block,
  "inline": inline,
  "inline-block": inline-block,
  "flex": flex,
  "inline-flex": inline-flex,
);
$flex-vertical-alignments: (
  "start": flex-start,
  "center": center,
  "end": flex-end,
  "stretch": stretch,
  "baseline": baseline,
);
$flex-horizontal-alignments: (
  "start": flex-start,
  "center": center,
  "end": flex-end,
  "between": space-between,
  "around": space-around,
  "evenly": space-evenly,
);
$flex-directions: (
  "row": row,
  "column": column,
);
$flex-wraps: (
  "wrap": wrap,
  "nowrap": nowrap,
);
$text-alignments: (
  "left": left,
  "center": center,
  "right": right,
);

@mixin emit-display-classes($suffix: "") {
  @each $utility, $value in $display-utilities {
    .pz-#{$utility}#{$suffix} {
      display: $value !important;
    }
  }

  @each $alignment, $value in $flex-vertical-alignments {
    .pz-flex#{$suffix}--vertical-#{$alignment} {
      align-items: $value !important;
    }
  }

  @each $alignment, $value in $flex-horizontal-alignments {
    .pz-flex#{$suffix}--horizontal-#{$alignment} {
      justify-content: $value !important;
    }
  }

  @each $direction, $value in $flex-directions {
    .pz-flex#{$suffix}--#{$direction} {
      flex-direction: $value !important;
    }
  }

  @each $wrap, $value in $flex-wraps {
    .pz-flex#{$suffix}--#{$wrap} {
      flex-wrap: $value !important;
    }
  }

  @each $alignment, $value in $text-alignments {
    .pz-text-#{$alignment}#{$suffix} {
      text-align: $value !important;
    }
  }
}

@include emit-display-classes;

@include min-media-devices("sm") {
  @include emit-display-classes("-sm");
}

@include min-media-devices("md") {
  @include emit-display-classes("-md");
}

@include min-media-devices("lg") {
  @include emit-display-classes("-lg");
}

@include min-media-devices("xl") {
  @include emit-display-classes("-xl");
}

@include min-media-devices("xxl") {
  @include emit-display-classes("-xxl");
}
