// Text align
// Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.
// https://getbootstrap.com/docs/4.3/utilities/vertical-align/

.responsive-align(@infix) {
  @media (min-width: ~"@{screen-@{infix}-min}") {
    .align-@{infix}-baseline     { .align-baseline; }
    .align-@{infix}-top          { .align-top; }
    .align-@{infix}-middle       { .align-middle; }
    .align-@{infix}-bottom       { .align-bottom; }
    .align-@{infix}-text-bottom  { .align-text-bottom; }
    .align-@{infix}-text-top     { .align-text-top; }
    .align-@{infix}-parent       { .align-parent; }
    .align-@{infix}-child-top    { .align-child-top; }
    .align-@{infix}-child-middle { .align-child-middle; }
    .align-@{infix}-child-bottom { .align-child-bottom; }
  }
}
.align-baseline    { vertical-align: baseline !important; } // Browser default
.align-top         { vertical-align: top !important; }
.align-middle      { vertical-align: middle !important; }
.align-bottom      { vertical-align: bottom !important; }
.align-text-bottom { vertical-align: text-bottom !important; }
.align-text-top    { vertical-align: text-top !important; }


// Vertical alignment
// Handy technique if you dont know the height of the element.
// Can be problematic, particulary with floated element.
.align-parent {
  position: relative !important;
}
.align-child-top {
  position: absolute !important;
  top: 0 !important;
  transform: translateY(0) !important;
}
.align-child-middle {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
.align-child-bottom {
  position: absolute !important;
  bottom: 0 !important;
  transform: translateY(0) !important;
}

.responsive-align(sm);
.responsive-align(md);
.responsive-align(lg);