@mixin tachyons($className) {
  composes: $className from global;
}

@mixin mv($margin) {
  margin-top: $margin;
  margin-bottom: $margin;
}

@mixin mh($margin) {
  margin-left: $margin;
  margin-right: $margin;
}

@mixin pv($padding) {
  padding-top: $padding;
  padding-bottom: $padding;
}

@mixin ph($padding) {
  padding-left: $padding;
  padding-right: $padding;
}

@mixin not-small {
  @media screen and (min-width: $tachyons-breakpoint-m) {
    @content;
  }
}

@mixin extra-small {
  @media screen and (max-width: 320px) {
    @content;
  }
}

@mixin small {
  @media screen and (max-width: $tachyons-breakpoint-m) {
    @content;
  }
}

@mixin medium {
  @media screen and (min-width: $tachyons-breakpoint-m) and (max-width: $tachyons-breakpoint-l) {
    @content;
  }
}

@mixin large {
  @media screen and (min-width: $tachyons-breakpoint-l) {
    @content;
  }
}

@mixin retina {
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    @content;
  }
}

// Don't use for multiple tachyons (i.e different sizes because the ordering will be wrong
@mixin new-single-tachyon {
  @content;

  @include not-small {
    &-ns {
      @content;
    }
  }
  @include medium {
    &-m {
      @content;
    }
  }
  @include large {
    &-l {
      @content;
    }
  }
}

// Screen Readers Only
// https://github.com/twbs/bootstrap/blob/master/scss/mixins/_screen-reader.scss

// Only display content to screen readers
//
// See: https://a11yproject.com/posts/how-to-hide-content/
// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
@mixin sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

// Use in conjunction with .sr-only to only display content when it's focused.
//
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
//
// Credit: HTML5 Boilerplate
@mixin sr-only-focusable {
  &:active,
  &:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}