/**
* @stylesheet helper-classes.less Helper Classes
* @parent styles-utilities 4
*
**/

 /**
* @styles contextual-colors Contextual Colors
* @parent helper-classes.less 0
*
* @description
* Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links
* and will darken on hover just like our default link styles.
*
* @demo demos/helper-classes/contextual-colors/demo.html
*
* <blockquote>
* <h4>Dealing with specificity</h4>
* Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a
* sufficient workaround is to wrap your text in a <code>&lt;span&gt;</code> with the class.
* </blockquote>
*
* <blockquote>
* <h4>Conveying meaning to assistive technologies</h4>
* Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive
* technologies - such as screen readers. Ensure that information denoted by the color is either obvious from the
* content itself (the contextual colors are only used to reinforce meaning that is already present in the text/markup),
* or is included through alternative means, such as additional text hidden with the <code>.sr-only</code> class.
* </blockquote>
*
**/

 /**
* @styles contextual-backgrounds Contextual backgrounds
* @parent helper-classes.less 1
*
* @description
* Similar to the contextual text color classes, easily set the background of an element to any contextual class.
* Anchor components will darken on hover, just like the text classes.
*
* @demo demos/helper-classes/contextual-backgrounds/demo.html
*
* <blockquote>
* <h4>Dealing with specificity</h4>
* Sometimes contextual background classes cannot be applied due to the specificity of another selector. In some cases,
* a sufficient workaround is to wrap your element's content in a <code>&lt;div&gt;</code>  with the class.
* </blockquote>
*
* <blockquote>
* <h4>Conveying meaning to assistive technologies</h4>
* As with <a href="/contextual-colors.html">contextual colors</a>, ensure that any meaning conveyed through color is also conveyed in a format that is not
* purely presentational.
* </blockquote>
*
**/

/**
* @styles quick-floats Quick Floats
* @parent helper-classes.less 4
*
* @description
* Float an element to the left or right with a class. `!important` is included to avoid specificity issues.
* Classes can also be used as mixins.
*
```
<div class="pull-left">...</div>
<div class="pull-right">...</div>

```
*
```
// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}
```
*
* <blockquote>
* <h4>Not for use in navbars</h4>
* To align components in navbars with utility classes, use <code>.navbar-left</code> or <code>.navbar-right instead</code>.
* <a href="/navbar.less.html">See the navbar docs</a> for details.
* </blockquote>
*
**/

/**
* @styles center-content-blocks Center content blocks
* @parent helper-classes.less 5
*
* @description
* Set an element to `display: block` and center via `margin`. Available as a mixin and class.
*
```
<div class="center-block">...</div>
```
*
```
// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}
```
*
**/

/**
* @styles clearfix Clearfix
* @parent helper-classes.less 6
*
* @description
* Easily clear `float`s by adding `.clearfix` to the parent element. Utilizes
* [the micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack/) as popularized by
* Nicolas Gallagher. Can also be used as a mixin.
*
```
<!-- Usage as a class -->
<div class="clearfix">...</div>
```
*
```
// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}
```
*
**/

/**
* @styles showing-and-hiding-content Showing and hiding content
* @parent helper-classes.less 7
*
* @description
* Force an element to be shown or hidden (including for screen readers) with the use of `.show` and `.hidden` classes.
* These classes use `!important` to avoid specificity conflicts, just like the [quick floats](\quick-floats). They are only available
* for block level toggling. They can also be used as mixins.
*
*`.hide` is available, but it does not always affect screen readers and is deprecated as of v3.0.1. Use `.hidden` or
*`.sr-only` instead.
*
* Furthermore, `.invisible` can be used to toggle only the visibility of an element, meaning its `display` is not
* modified and the element can still affect the flow of the document.
*
```
<div class="show">...</div>
<div class="hidden">...</div>
```
*
```
// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}
```
*
**/

/**
* @styles screen-reader-and-keyboard-navigation-content Screen reader and keyboard navigation content
* @parent helper-classes.less 8
*
* @description
* Hide an element to all devices *except screen readers* with `.sr-only`. Combine `.sr-only` with `.sr-only-focusable`
* to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following [accessibility
& best practices](/accessibility). Can also be used as mixins.
*
```
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
```
*
```
// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}
```
*
**/

/**
* @styles image-replacement Image replacement
* @parent helper-classes.less 9
*
* @description
* Utilize the `.text-hide class` or mixin to help replace an element's text content with a background image.
*
```
<h1 class="text-hide">Custom heading</h1>
```
*
```
// Usage as a mixin
.heading {
  .text-hide();
}
```
*
**/