// Visibility and display utilities

// Responsive display utilities @each $breakpoint, $variant in $responsive-variants {

@include breakpoint($breakpoint) {
  @each $display in $display-values {
    .d#{$variant}-#{$display} { display: $display !important; }
  }
}

}

.v-hidden { visibility: hidden !important; } .v-visible { visibility: visible !important; }

// Hide utilities for each breakpoint // Each hide utility only applies to one breakpoint range. @media (max-width: $width-sm - 1px) {

.hide-sm {
  display: none !important;
}

}

@media (min-width: $width-sm) and (max-width: $width-md - 1px) {

.hide-md {
  display: none !important;
}

}

@media (min-width: $width-md) and (max-width: $width-lg - 1px) {

.hide-lg {
  display: none !important;
}

}

@media (min-width: $width-lg) {

.hide-xl {
  display: none !important;
}

}

/* Set the table-layout to fixed */ .table-fixed { table-layout: fixed !important; }

// Only display content to screen readers // // See: a11yproject.com/posts/how-to-hide-content/ .sr-only {

position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
// Workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=1241631
word-wrap: normal;
border: 0;

}

// Only display content on focus .show-on-focus {

position: absolute;
width: 1px;
height: 1px;
margin: 0;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);

&:focus {
  z-index: 20;
  width: auto;
  height: auto;
  clip: auto;
}

}