// inspired by Bootstrap 4 display utilities
$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;

@each $device, $width in $breakpoints {
  @include min-query($device) {
    @each $value in $displays {
      @if $device == mobile {
        .d-#{$value} {
          display: $value !important;
        }
      } @else {
        .d-#{$value}-#{$device} {
          display: $value !important;
        }
      }
    }
  }
}

.visually-hidden,
.visually-hidden-focusable:not(:focus-visible) {
  @include visually-hidden;
}