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

.qpp-u-vertical-align--baseline {
  vertical-align: baseline !important;
}

.qpp-u-vertical-align--sub {
  vertical-align: sub !important;
}

.qpp-u-vertical-align--super {
  vertical-align: super !important;
}

.qpp-u-vertical-align--text-top {
  vertical-align: text-top !important;
}

.qpp-u-vertical-align--text-bottom {
  vertical-align: text-bottom !important;
}

.qpp-u-vertical-align--middle {
  vertical-align: middle !important;
}

.qpp-u-vertical-align--top {
  vertical-align: top !important;
}

.qpp-u-vertical-align--bottom {
  vertical-align: bottom !important;
}

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

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

    .qpp-u-#{$breakpoint}-vertical-align--sub {
      vertical-align: sub !important;
    }

    .qpp-u-#{$breakpoint}-vertical-align--super {
      vertical-align: super !important;
    }

    .qpp-u-vertical-align--text-top {
      vertical-align: text-top !important;
    }

    .qpp-u-#{$breakpoint}-vertical-align--text-bottom {
      vertical-align: text-bottom !important;
    }

    .qpp-u-#{$breakpoint}-vertical-align--middle {
      vertical-align: middle !important;
    }

    .qpp-u-#{$breakpoint}-vertical-align--top {
      vertical-align: top !important;
    }

    .qpp-u-#{$breakpoint}-vertical-align--bottom {
      vertical-align: bottom !important;
    }
  }
}