@import 'mixins/tools.mediaqueries';
@import 'mixins/utilities.visibility';

@mixin visible($value) {
  .u-#{$value} {
    visibility: $value !important;
  }
  @each $size, $width in $screen-limits {
    .u-#{$value}\@#{$size} {
      @include screen-and-up($size) {
        visibility: $value !important;
      }
    }
  }
}

@mixin display($value) {
  .u-display-#{$value} {
    display: $value !important;
  }

  @each $size, $width in $screen-limits {
    .u-display-#{$value}\@#{$size} {
      @include screen-and-up($size) {
        display: $value !important;
      }
    }
  }
}

.u-visually-hidden {
  @include visually-hidden;
}

@each $size, $width in $screen-limits {
  .u-visually-hidden\@#{$size} {
    @include screen-and-up($size) {
      @include visually-hidden;
    }
  }
}

@include visible(visible);
@include visible(hidden);
@include display(none);
@include display(initial);
@include display(inline);
@include display(inline-block);
@include display(block);
@include display(table);
@include display(table-cell);
@include display(table-row);
@include display(flex);
@include display(inline-flex);