@use "../config";
@use "../mixins";
@use "../variables";
@use "sass:map";

// Display
.hidden {
  display: none !important;
}

.show-print {
  display: none;
  @media print {
    display: block;
  }
}

.hide-print {
  @media print {
    display: none !important;
  }
}

@each $display in variables.$displays {
  .display--#{$display} {
    display: $display !important;
  }
}

@each $breakpoint, $size in config.$breakpoints {
  @each $display, $d in (s: show, h: hide) {
    .#{$d}-#{$breakpoint}-up {
      @if $d == hide {
        @media (min-width: ($size)) {
          display: none !important;
        }
      } @else if $d == show {
        @media (min-width: ($size)) {
          display: block !important;

          &.display--inline-block {
            display: inline-block !important;
          }

          &.display--inline {
            display: inline !important;
          }

          &.flex,
          &.display--flex,
          &.block-container {
            display: flex !important;
          }

          &.flex-inline,
          &.display--inline-flex {
            display: inline-flex !important;
          }
        }
      }
    }

    // return all keys from a map as a list
    $mapped__keys: map.keys(config.$breakpoints);
    // get index of the current name passed
    $index: (index($mapped__keys, $breakpoint));

    // Display utility for specific break point
    // this will generate a min-width and max-width media query.
    .#{$d}-#{$breakpoint}-only {
      @if $d == show {
        // Hides element by default
        display: none;
      }

      @if $index {
        // if there is another key above the selected key, run this
        @if $index < length(config.$breakpoints) {
          @media (min-width: ($size)) and (max-width: map.get(config.$breakpoints, mixins.nextKey($breakpoint) )  - 1) {
            @if $d == hide {
              display: none !important;
            } @else {
              display: block !important;

              &.display--inline-block {
                display: inline-block !important;
              }

              &.display--inline {
                display: inline !important;
              }

              &.flex,
              &.display--flex,
              &.block-container {
                display: flex !important;
              }

              &.flex-inline,
              &.display--inline-flex {
                display: inline-flex !important;
              }
            }
          }
        }
      }
    }

    // Display utility for a max-width media query
    .#{$d}-#{$breakpoint}-down {
      // if $breakpoint is not mobile run it
      @if $index > 1 {
        @media (max-width: map.get(config.$breakpoints, $breakpoint) - 1) {
          @if $breakpoint == "mobiile" {
          } @else {
            @if $d == hide {
              display: none !important;
            } @else {
              display: block !important;

              &.display--inline-block {
                display: inline-block !important;
              }

              &.display--inline {
                display: inline !important;
              }

              &.flex,
              &.display--flex,
              &.block-container {
                display: flex !important;
              }

              &.flex-inline,
              &.display--inline-flex {
                display: inline-flex !important;
              }
            }
          }
        }
      }
    }
  }
}

// New Responsive Classes
$displays: (
  show: block,
  hide: none,
);

.hide {
  display: none !important;
}

.show {
  display: block !important;
}

@each $breakpoint, $breakpointValue in config.$breakpoints {
  @each $display, $d in $displays {
    // return all keys from a map as a list
    $mapped__keys: map.keys(config.$breakpoints);
    // get index of the current name passed
    $index: (index($mapped__keys, $breakpoint));

    @if $index {
      // if there is another key above the selected key, run this
      .#{$display}\:#{$breakpoint} {
        // no need for a mobile (min-width: 0)
        @if $index > 1 {
          @if $display == show {
            @media (min-width: $breakpointValue) {
              display: block !important;

              &.display--inline-block {
                display: inline-block !important;
              }

              &.display--inline {
                display: inline !important;
              }

              &.flex,
              &.flex--center-content,
              &.display--flex,
              &.block-container {
                display: flex !important;
              }

              &.flex-inline,
              &.display--inline-flex {
                display: inline-flex !important;
              }
            }
          } @else {
            @media (min-width: $breakpointValue) {
              display: none !important;
            }
          }
        }
      }
    }
  }
}