@use "sass:map";
@use "mixins";
@use "utils";
@use "variables";

@mixin displays($infix: "") {
  .fwe-d#{$infix}-none {
    display: none !important;
  }

  .fwe-d#{$infix}-flex {
    display: flex !important;
  }

  .fwe-d#{$infix}-inline-flex {
    display: inline-flex !important;
  }

  .fwe-d#{$infix}-grid {
    display: grid !important;
  }

  .fwe-d#{$infix}-inline {
    display: inline !important;
  }

  .fwe-d#{$infix}-block {
    display: block !important;
  }

  .fwe-d#{$infix}-inline-block {
    display: inline-block !important;
  }

  .fwe-d#{$infix}-table {
    display: table !important;
  }

  .fwe-d#{$infix}-table-cell {
    display: table-cell !important;
  }

  .fwe-d#{$infix}-table-row {
    display: table-row !important;
  }
}

@each $breakpoint in map.keys(variables.$grid-breakpoints) {
  $infix: utils.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
  $size: map.get(variables.$grid-breakpoints, $breakpoint);

  @if $size == 0 {
    @include displays();
  } @else {
    @media (min-width: $size) {
      @include displays($infix);
    }
  }
}

.fwe-sr-only {
  @include mixins.visual-hidden();
}