// ==========================================================================
// TOOLS | Mixins
// ==========================================================================

// Use: @include clearfix;
@mixin clearfix {
  &:after {
    content: '';
    display: table;
    clear: both;
  }
}

// Use: @include valign-parent;
@mixin valign-parent {
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  height: 100%;
}

// Use: @include valign-child;
@mixin valign-child {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  height: 100%;
}

// Use: @include screen-reader-text;
@mixin screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;

  &:focus {
    clip: auto !important;
    display: block;
    width: auto;
    height: auto;
    left: 5px;
    top: 5px;
    z-index: 100000;
  }
}

// Responsive screen sizes
@mixin mobile {
  @media (max-width: #{$tablet}-1) {
    @content;
  }
}

@mixin mobile-tablet {
  @media (max-width: #{$desktop}-1) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: #{$tablet}) and (max-width: #{$desktop}-1) {
    @content;
  }
}

@mixin tablet-desktop {
  @media (min-width: #{$tablet}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: #{$desktop}) {
    @content;
  }
}