/* ============================================================================
   @UTILITIES -> ALIGNMENTS
   ========================================================================= */


/**
 * Apply different alignments to elements.
 *
 * N.B. text alignments can be found in the Text -> Alignment utility.
 *
 * All the utilities (available as silent placeholder selectors also):
 *
   .u-align-v-inline-top
   .u-align-v-inline-middle
   .u-align-v-inline-baseline
   .u-align-v-inline-bottom
   .u-align-v-inline-inherit
   .u-align-v-block-middle-flexbox
   .u-align-v-block-middle-position
   .u-align-center-block
 *
 * @demo
 * http://codepen.io/chris-pearce/full/YPejod/
 */


/**
 * Settings.
 */

/**
 * Apply at these breakpoints (turned off by default).
 */

$u-align-apply-at-breakpoints:                            $default-breakpoints !default;

// From the above breakpoints choose which utilities you wish to apply it too
$u-align-apply-breakpoints-for-v-inline-top:              false !default;

$u-align-apply-breakpoints-for-v-inline-middle:           false !default;

$u-align-apply-breakpoints-for-v-inline-baseline:         false !default;

$u-align-apply-breakpoints-for-v-inline-bottom:           false !default;

$u-align-apply-breakpoints-for-v-inline-inherit:          false !default;

$u-align-apply-breakpoints-for-v-block-middle-flexbox:    false !default;

$u-align-apply-breakpoints-for-v-block-middle-position:   false !default;

$u-align-apply-breakpoints-for-center-block:              false !default;


/**
 * Inline vertical alignments.
 */

// Top
%u-align-v-inline-top,
.u-align-v-inline-top {
  vertical-align: top !important;
}

@if $u-align-apply-breakpoints-for-v-inline-top {
  @include generate-at-breakpoints('.u-align-v-inline-top',
    $u-align-apply-at-breakpoints) {
    vertical-align: top !important;
  }
}

// Middle
%u-align-v-inline-middle,
.u-align-v-inline-middle {
  vertical-align: middle !important;
}

@if $u-align-apply-breakpoints-for-v-inline-middle {
  @include generate-at-breakpoints('.u-align-v-inline-middle',
    $u-align-apply-at-breakpoints) {
    vertical-align: middle !important;
  }
}

// Baseline
%u-align-v-inline-baseline,
.u-align-v-inline-baseline {
  vertical-align: baseline !important;
}

@if $u-align-apply-breakpoints-for-v-inline-baseline {
  @include generate-at-breakpoints('.u-align-v-inline-baseline',
    $u-align-apply-at-breakpoints) {
    vertical-align: baseline !important;
  }
}

// Bottom
%u-align-v-inline-bottom,
.u-align-v-inline-bottom {
  vertical-align: bottom !important;
}

@if $u-align-apply-breakpoints-for-v-inline-bottom {
  @include generate-at-breakpoints('.u-align-v-inline-bottom',
    $u-align-apply-at-breakpoints) {
    vertical-align: bottom !important;
  }
}

// Inherit
%u-align-v-inline-inherit,
.u-align-v-inline-inherit {
  vertical-align: inherit !important;
}

@if $u-align-apply-breakpoints-for-v-inline-inherit {
  @include generate-at-breakpoints('.u-align-v-inline-inherit',
    $u-align-apply-at-breakpoints) {
    vertical-align: inherit !important;
  }
}


/**
 * Block level vertical alignments.
 */

// Flexbox method
// N.B. this has limited support so use with caution
%u-align-v-block-middle-flexbox,
.u-align-v-block-middle-flexbox {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@if $u-align-apply-breakpoints-for-v-block-middle-flexbox {
  @include generate-at-breakpoints('.u-align-v-block-middle-flexbox',
    $u-align-apply-at-breakpoints) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

// Position relative method
%u-align-v-block-middle-position,
.u-align-v-block-middle-position {
  position: relative !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

@if $u-align-apply-breakpoints-for-v-block-middle-position {
  @include generate-at-breakpoints('.u-align-v-block-middle-position',
    $u-align-apply-at-breakpoints) {
    position: relative !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}


/**
 * Center align a block level element.
 *
 * 1. Make it work on inline elements e.g. `img`.
 */

%u-align-center-block,
.u-align-center-block {
  display: block !important; // [1]
  margin-left: auto !important;
  margin-right: auto !important;
}

@if $u-align-apply-breakpoints-for-center-block {
  @include generate-at-breakpoints('.u-align-center-block',
    $u-align-apply-at-breakpoints) {
    display: block !important; // [1]
    margin-left: auto !important;
    margin-right: auto !important;
  }
}