/*
  UTILITIES
  ---------

  Responsive helper classes to assist you in quickly doing basic formatting and layout.

  Features:
   - Vertical alignment
   - Visibility
   - Text alignment
   - Floating
*/

$block-selector: '[class*="grid-block"]';

@mixin show-for($size, $prop: block) {
  &:not(.ng-hide) {
    display: none !important;
    @include breakpoint($size) {
      display: $prop !important;
    }
  }
}

@mixin show-for-only($size, $prop: block) {
  &:not(.ng-hide) {
    display: none !important;
    @include breakpoint($size only) {
      display: $prop !important;
    }
  }
}

@mixin hide-for($size, $prop: block) {
  &:not(.ng-hide) {
    display: $prop !important;
    @include breakpoint($size) {
      display: none !important;
    }
  }
}

@mixin hide-for-only($size, $prop: block) {
  &:not(.ng-hide) {
    display: $prop !important;
    @include breakpoint($size only) {
      display: none !important;
    }
  }
}

@include exports(utilities) {
  // Vertical alignment
  .v-align {
    display: flex;
    align-items: center;
    justify-content: space-between;

    $align-values: (
      'top': flex-start,
      'center': center,
      'bottom': flex-end,
    );

    @each $orient in (top, center, bottom) {
      .align-#{$orient} {
        align-self: map-get($align-values, $orient);
      }
    }

    @each $size in $breakpoint-classes {
      @each $orient in (top, center, bottom) {
        @include breakpoint($size) {
          .#{$size}-align-#{$orient} {
            align-self: map-get($align-values, $orient);
          }
        }
      }
    }
  }

  // Visibility
  .hide { display: none !important; }

  .invisible { visibility: hidden; }

  @each $size in $breakpoint-classes {
    .hide-for-#{$size} {
      @include hide-for($size);
      &#{$block-selector} { @include hide-for($size, flex); }
    }

    .show-for-#{$size} {
      @include show-for($size);
      &#{$block-selector} { @include show-for($size, flex); }
    }

    .hide-for-#{$size}-only {
      @include hide-for-only($size);
      &#{$block-selector} { @include hide-for-only($size, flex); }
    }

    .show-for-#{$size}-only {
      @include show-for-only($size);
      &#{$block-selector} { @include show-for-only($size, flex); }
    }
  }

  @each $orientation in (portrait, landscape) {
    .hide-for-#{$orientation} {
      @include breakpoint($orientation) {
        display: none !important;
        &#{$block-selector} { display: flex !important; }
      }
    }

    .show-for-#{$orientation} {
      display: none !important;
      
      @include breakpoint($orientation) {
        display: block !important;
        &#{$block-selector} { display: flex !important; }
      }
    }
  }

  /*
    Text alignment
  */
  @each $align in (left, right, center, justify) {
    .text-#{$align} {
      text-align: $align;
    }
    
    @each $size in $breakpoint-classes {
      @include breakpoint($size) {
        .#{$size}-text-#{$align} {
          text-align: $align;
        }
      }

      @include breakpoint($size only) {
        .#{$size}-only-text-#{$align} {
          text-align: $align;
        }
      }
    }
  }

  /*
    Floating
  */
  .clearfix { @include clearfix; }

  @each $float in (left, right, none) {
    .float-#{$float} {
      float: #{$float};
    }
  }
}