@mixin clear-fix {
  &:before,
  &:after {
    display: table;
    content: " ";
  }

  &:after { clear: both; }

  *zoom: 1;
}

@mixin table-layout {
  display: table;
  width:  100%;
  height: 100%;
}

@mixin table-layout-cell($vertical-align: middle) {
  display: table-cell;
  vertical-align: $vertical-align;
}

@mixin visually-hidden {
  position: absolute;
  margin: -1px;
  padding: 0;
  border: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);

  &.focusable {
    &:active,
    &:focus {
      position: static;
      margin: 0;
      width: auto;
      height: auto;
      overflow: visible;
      clip: auto;
    }
  }
}

@mixin invisible { visibility: hidden; }

@mixin image-replacement {
  border: 0;
  overflow: hidden;
  background-color: transparent;
  /* IE 6/7 fallback */
  *text-indent: -9999px;

  &:before {
    display: block;
    width: 0;
    height: 150%;
    content: "";
  }
}

@mixin hidden {
  display: none !important;
  visibility: hidden;
}



%clear-fix { @include clear-fix; }

%table-layout { @include table-layout; }
%table-layout-cell { @include table-layout-cell; }
%table-layout-cell-baseline { @include table-layout-cell(baseline); }

%hidden { @include hidden; }
.visually-hidden { @include visually-hidden; }
%invisible { @include invisible; }

%image-replacement { @include image-replacement; }

<% data.layout.resolutions.each do |resolution| %>
  @include at-breakpoint($<%= resolution.target %>) {
    %clear-fix-<%= resolution.target %> { @include clear-fix; }

    %table-layout-<%= resolution.target %> { @include table-layout; }
    %table-layout-cell-<%= resolution.target %> { @include table-layout-cell; }
    %table-layout-cell-baseline-<%= resolution.target %> { @include table-layout-cell(baseline); }

    %hidden-<%= resolution.target %> { @include hidden; }
    .visually-hidden-<%= resolution.target %> { @include visually-hidden; }
    %invisible-<%= resolution.target %> { @include invisible; }

    %image-replacement-<%= resolution.target %> { @include image-replacement; }
  }
<% end %>



.hide { display: none !important; }
.show { display: block !important; }

.fade {
  @include transition(opacity 0.15s linear);
  opacity: 0;

  &.in { opacity: 1 }
}

.collapse {
  display: none;

  &.in { display: block; }
}

.collapsing {
  @include transition(height 0.35s ease);
  position: relative;
  height: 0;
  overflow: hidden;
}