// stylelint-disable declaration-no-important
@use '../settings/variables' as v;
@use '../settings/mixins' as m;

.qpp-u-display--block {
  display: block !important;
}

.qpp-u-display--inline-block {
  display: inline-block !important;
}

.qpp-u-display--inline {
  display: inline !important;
}

.qpp-u-display--flex {
  display: flex !important;
}

.qpp-u-display--inline-flex {
  display: inline-flex !important;
}

.qpp-u-display--none {
  display: none !important;
}

.qpp-u-visibility--hidden {
  visibility: hidden !important;
}

.qpp-u-visibility--visible {
  visibility: visible !important;
}

@each $breakpoint in map-keys(v.$breakpoints) {
  $viewport: map-get(v.$breakpoints, $breakpoint);

  @media (min-width: $viewport) {
    .qpp-u-#{$breakpoint}-display--block {
      display: block !important;
    }

    .qpp-u-#{$breakpoint}-display--inline-block {
      display: inline-block !important;
    }

    .qpp-u-#{$breakpoint}-display--inline {
      display: inline !important;
    }

    .qpp-u-#{$breakpoint}-display--flex {
      display: flex !important;
    }

    .qpp-u-#{$breakpoint}-display--inline-flex {
      display: inline-flex !important;
    }

    .qpp-u-#{$breakpoint}-display--none {
      display: none !important;
    }

    .qpp-u-#{$breakpoint}-visibility--hidden {
      visibility: hidden !important;
    }

    .qpp-u-#{$breakpoint}-visibility--visible {
      visibility: visible !important;
    }
  }
}

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

@media print {
  .qpp-u-visibility--hidden-print {
    display: none !important;
  }
}