@use "sass:map" as sassmap;
@use "../tokens/breakpoint";
@use "../tools/map";
@use "../tools/visibility";

@layer utilities {
  .visually-hidden,
  .sr-only {
    @include visibility.visually-hidden;
  }

  @mixin show-for($breakpoint) {
    @if sassmap.get(breakpoint.$map, $breakpoint) {
      @include breakpoint.get($breakpoint, downfrom) {
        display: none !important;
      }
    } @else {
      @warn 'show-for() parameter breakpoint is not defined in the breakpoint.$map map';
    }
  }

  @mixin hide-for($breakpoint) {
    @if sassmap.get(breakpoint.$map, $breakpoint) {
      @include breakpoint.get($breakpoint) {
        display: none !important;
      }
    } @else {
      @warn 'hide-for() parameter breakpoint is not defined in the breakpoint.$map map';
    }
  }

  @mixin show-for-only($breakpoint) {
    $lower-bound-name: $breakpoint;
    $upper-bound-name: map.next(breakpoint.$map, $breakpoint, "key");

    @if $lower-bound-name {
      @include breakpoint.get($lower-bound-name, downfrom) {
        display: none !important;
      }

      @if $upper-bound-name {
        @include breakpoint.get($upper-bound-name) {
          display: none !important;
        }
      }
    } @else {
      @warn 'hide-for() parameter #{$breakpoint} is not defined properly in the breakpoint.$map map';
    }
  }

  @mixin hide-for-only($breakpoint) {
    @if sassmap.get(breakpoint.$map, $breakpoint) {
      @include breakpoint.get($breakpoint, only) {
        display: none !important;
      }
    } @else {
      @warn 'hide-for() parameter #{$breakpoint} is not defined properly in the breakpoint.$map map';
    }
  }

  @mixin visibility-classes() {
    .hide {
      display: none !important;
    }

    .invisible {
      visibility: hidden;
    }

    @each $breakpoint, $size in breakpoint.$map {
      @if $breakpoint != "xs" {
        .show-#{$breakpoint} {
          @include show-for($breakpoint);
        }

        .hide-#{$breakpoint} {
          @include hide-for($breakpoint);
        }
      }

      .show-#{$breakpoint}-only {
        @include show-for-only($breakpoint);
      }

      .hide-#{$breakpoint}-only {
        @include hide-for-only($breakpoint);
      }
    }
  }

  @include visibility-classes;
}