/**
 * @name 	Helper Classes
 * This file is responsible to register the static helper classes like:
 *
 * - sugar.pull.left : ```.pull-left```
 * - sugar.pull.right : ```.pull-right```
 * - sugar.position.relative : ```.relative```
 * - sugar.position.absolute : ```.absolute```
 * - sugar.clear.left : ```.clear-left```
 * - sugar.clear.right : ```.clear-right```
 * - sugar.clear.both : ```.clear```
 * - sugar.pointer.events.all : ```.pointer-events-all```
 * - sugar.pointer.events.none : ```.pointer-events-none```
 * - sugar.display.show : ```.show```
 * - sugar.display.show-inline : ```.show-inline```
 * - sugar.display.hidden : ```.hidden```
 * - sugar.display.hide : ```.hide```
 * - sugar.display.visible : ```.visible```
 * - sugar.display.invisible : ```.invisible```
 * - sugar.display.visually-hidden : ```.visually-hidden```
 * - sugar.text.hidden : ```.t-hidden```
 * - sugar.text.truncate : ```.t-truncate```
 * - sugar.text.align.left : ```.t-left```
 * - sugar.text.align.right : ```.t-right```
 * - sugar.text.align.center : ```.t-center```
 * - sugar.text.align.justify : ```.t-justify```
 * - sugar.text.transform.lowercase : ```.t-lowercase```
 * - sugar.text.transform.uppercase : ```.t-uppercase```
 * - sugar.text.transform.capitalize : ```.t-capitalize```
 * - sugar.font.weight.bold : ```.f-bold```
 * - sugar.font.weight.lighter : ```.f-lighter```
 * - sugar.font.weight.bolder : ```.f-bolder```
 * - sugar.font.weight.normal : ```.f-normal```
 * - sugar.font.style.italic : ```.f-italic```
 * - sugar.font.style.oblique : ```.f-oblique```
 * - sugar.font.variant.small-caps : ```.f-small-caps```
 * - sugar.block.align.center : ```.block-center```
 * - sugar.ratio.21-9 : ```.ratio-21-9```
 * - sugar.ratio.16-9 : ```.ratio-16-9```
 * - sugar.ratio.4-3 : ```.ratio-4-3```
 * - sugar.ratio.1-1 : ```.ratio-1-1```
 * - sugar.size.abs.cover : ```.abs-cover```
 * - sugar.size.abs.contain : ```.abs-contain```
 * - sugar.size.abs.fit : ```.abs-fit```
 * - sugar.media.object : ```.mo .mo--center .mo--end .mo__content```
 * - sugar.clearfix.default : ```.clearfix```
 * - sugar.clearfix.float : ```.clearfix-float```
 * - sugar.clearfix.micro : ```.clearfix-micro```
 * - sugar.clearfix.overflow : ```.clearfix-overflow```
 * - sugar.clearfix.facebook : ```.clearfix-facebook```
 * - sugar.no-transitions : ```.no-transitions```
 * - sugar.clear-transitions : ```.clear-transitions```
 * - sugar.no-animations : ```.no-animations```
 * - sugar.clear-animations : ```.clear-animations```
 * - sugar.no-transmations : ```.no-transmations```
 * - sugar.clear-transmations : ```.clear-transmations```
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com> (https://olivierbossel.com)
 */

//
// Pull
//
@include s-register-helper-class(pull-left, "sugar.pull.left") {
  /**
	 * @name 		```.pull-left```
	 * Allows you to pull an element to the left side
	 * @styleguide 	Helpers / Pull
	 * @example 	html
	 * 	<span class="pull-left">Hello world</span>
	 * </div>
	 */
  float: left;
}
@include s-register-helper-class(pull-right, "sugar.pull.right") {
  /**
	 * @name 		```.pull-right```
	 * Allows you to pull an element to the right side
	 * @styleguide 	Helpers / Pull
	 * @example 	html
	 * 	<span class="pull-right">Hello world</span>
	 * </div>
	 */
  float: right;
}

//
// Position
//
@include s-register-helper-class(relative, "sugar.position.relative") {
  /**
	 * @name 		```.relative```
	 * Set an element position as ```relative```
	 * @styleguide 	Helpers / Position
	 * @example 	html
	 * <div class="relative">
	 * 	I'm relative now
	 * </div>
	 */
  position: relative;
}
@include s-register-helper-class(absolute, "sugar.position.absolute") {
  /**
	 * @name 		```.absolute```
	 * Set an element position as ```absolute```
	 * @styleguide 	Helpers / Position
	 * @example 	html
	 * <div class="absolute">
	 * 	I'm absolute now
	 * </div>
	 */
  position: absolute;
}

//
// Clear
//
@include s-register-helper-class(clear-left, "sugar.clear.left") {
  /**
	 * @name 		```.clear-left```
	 * Clear the left float on the element
	 * @styleguide 	Helpers / Float
	 * @example 	html
	 * <div class="clear-left">
	 * 	I clear the left float
	 * </div>
	 */
  clear: left;
}
@include s-register-helper-class(clear-right, "sugar.clear.right") {
  /**
	 * @name 		```.clear-right```
	 * Clear the right float on the element
	 * @styleguide 	Helpers / Float
	 * @example 	html
	 * <div class="clear-right">
	 * 	I clear the right float
	 * </div>
	 */
  clear: right;
}
@include s-register-helper-class(clear, "sugar.clear.both") {
  /**
	 * @name 		```.clear```
	 * Clear both float on the element
	 * @styleguide 	Helpers / Float
	 * @example 	html
	 * <div class="clear">
	 * 	I clear both floats
	 * </div>
	 */
  clear: both;
}

//
// Pointer
//
@include s-register-helper-class(
  pointer-events-none,
  "sugar.pointer.events.none"
) {
  /**
	 * @name 		```.pointer-events-none```
	 * Disable any pointer events
	 * @styleguide 	Helpers / Pointer events
	 * @example 	html
	 * <div class="pointer-events-none">
	 * 	I will not react to any pointer events
	 * </div>
	 */
  pointer-events: none;
}
@include s-register-helper-class(
  pointer-events-all,
  "sugar.pointer.events.all"
) {
  /**
	 * @name 		```.pointer-events-all```
	 * Disable any pointer events
	 * @styleguide 	Helpers / Pointer events
	 * @example 	html
	 * <div class="pointer-events-all">
	 * 	I will not react to any pointer events
	 * </div>
	 */
  pointer-events: all;
}

//
// Show / hide
//
@include s-register-helper-class(block, "sugar.display.block") {
  /**
	 * @name 		```.block```
	 * Display the element as ```block```
	 * @styleguide 	Helpers / Display
	 * @example 	html
	 * <div class="block">
	 * 	I'm displayed as block
	 * </div>
	 */
  display: block;
}
@include s-register-helper-class(inline, "sugar.display.inline") {
  /**
	 * @name 		```.inline```
	 * Display the element as ```inline```
	 * @styleguide 	Helpers / Display
	 * @example 	html
	 * <div class="inline">
	 * 	I'm displayed as inline
	 * </div>
	 */
  display: inline;
}
@include s-register-helper-class(inline-block, "sugar.display.inline-block") {
  /**
	 * @name 		```.inline-block```
	 * Display the element as ```inline-block```
	 * @styleguide 	Helpers / Display
	 * @example 	html
	 * <div class="inline-block">
	 * 	I'm displayed as inline-block
	 * </div>
	 */
  display: inline-block;
}
@include s-register-helper-class(show, "sugar.display.show") {
  /**
	 * @name 		```.show```
	 * Display the element as ```block```
	 * @styleguide 	Helpers / Display
	 * @example 	html
	 * <div class="show">
	 * 	I'm displayed
	 * </div>
	 */
  display: block;
}
@include s-register-helper-class(show-inline, "sugar.display.show-inline") {
  /**
	 * @name 		```.show-inline```
	 * Display the element as ```inline-block```
	 * @styleguide 	Helpers / Display
	 * @example 	html
	 * <div class="show-inline">
	 * 	I'm inline displayed
	 * </div>
	 */
  display: inline-block;
}
@include s-register-helper-class(hidden, "sugar.display.hidden") {
  /**
	 * @name 		```.hidden```
	 * Hide the element by setting the display to ```none```
	 * @styleguide 	Helpers / Display
	 * @example 	html
	 * <div class="hidden">
	 * 	I'm hidden
	 * </div>
	 */
  display: none;
}
@include s-register-helper-class(hide, "sugar.display.hide") {
  /**
	 * @name 		```.hide```
	 * Hide the element by setting the display to ```none```
	 * @styleguide 	Helpers / Display
	 * @example 	html
	 * <div class="hide">
	 * 	I'm hidden
	 * </div>
	 */
  display: none;
}
@include s-register-helper-class(visible, "sugar.display.visible") {
  /**
	 * @name 		```.visible```
	 * Display the element by setting the visibility to ```visible```
	 * @styleguide 	Helpers / Display
	 * @example 	html
	 * <div class="visible">
	 * 	I'm visible
	 * </div>
	 */
  visibility: visible;
}
@include s-register-helper-class(invisible, "sugar.display.invisible") {
  /**
	 * @name 		```.invisible```
	 * Display the element by setting the visibility to ```hidden```
	 * @styleguide 	Helpers / Display
	 * @example 	html
	 * <div class="invisible">
	 * 	I'm invisible
	 * </div>
	 */
  visibility: hidden;
}
@include s-register-helper-class(
  visually-hidden,
  "sugar.display.visually-hidden"
) {
  /**
	 * @name 		```.visually-hidden```
	 * Hide the element from display but not for SEO.
	 * This class use some tricks to make the element dissapear without using some ```display:none;```, etc...
	 * @styleguide 	Helpers / Display
	 * @example 	html
	 * <div class="visually-hidden">
	 * 	I'm only visually hidden
	 * </div>
	 */
  @include s-visually-hidden();
}

//
// Text
//
@include s-register-helper-class(t-hidden, "sugar.text.hidden") {
  /**
	 * @name 		```.t-hidden```
	 * Hide the text
	 * @styleguide 	Helpers / Text
	 * @example 	html
	 * <div class="t-hidden">
	 * 	I'm not visible
	 * </div>
	 */
  @include s-hide-text();
}
@include s-register-helper-class(t-truncate, "sugar.text.truncate") {
  /**
	 * @name 		```.t-truncate```
	 * Hide the text
	 * @styleguide 	Helpers / Text
	 * @example 	html
	 * <div class="t-truncate">
	 * 	I'm truncated cause I talk a lot too much Nulla mauris eros, finibus ac faucibus et, tempus quis risus. Praesent sit amet nulla vel libero euismod sodales eu nec.
	 * </div>
	 */
  @include s-truncate-text();
}
@include s-register-helper-class(t-left, "sugar.text.align.left") {
  /**
	 * @name 		```.t-left```
	 * Align the text to the left
	 * @styleguide 	Helpers / Text Align
	 * @example 	html
	 * <div class="t-left">
	 * 	I'm left aligned
	 * </div>
	 */
  text-align: left;
}
@include s-register-helper-class(t-right, "sugar.text.align.right") {
  /**
	 * @name 		```.t-right```
	 * Align the text to the right
	 * @styleguide 	Helpers / Text Align
	 * @example 	html
	 * <div class="t-right">
	 * 	I'm right aligned
	 * </div>
	 */
  text-align: right;
}
@include s-register-helper-class(t-center, "sugar.text.align.center") {
  /**
	 * @name 		```.t-center```
	 * Align the text to the center
	 * @styleguide 	Helpers / Text Align
	 * @example 	html
	 * <div class="t-center">
	 * 	I'm centered
	 * </div>
	 */
  text-align: center;
}
@include s-register-helper-class(t-justify, "sugar.text.align.justify") {
  /**
	 * @name 		```.t-justify```
	 * Make the text justified
	 * @styleguide 	Helpers / Text Align
	 * @example 	html
	 * <div class="t-justify">
	 * 	Nullam vel feugiat nunc. Phasellus facilisis, nisi sit amet viverra rhoncus, arcu risus volutpat dolor, sed euismod magna tellus ac purus. Praesent augue lorem, ullamcorper ac accumsan nec, suscipit eu.
	 * </div>
	 */
  text-align: justify;
}
@include s-register-helper-class(
  t-lowercase,
  "sugar.text.transform.lowercase"
) {
  /**
	 * @name 		```.t-lowercase```
	 * Transform the text to lowercase
	 * @styleguide 	Helpers / Text Transform
	 * @example 	html
	 * <div class="t-lowercase">
	 * 	I'M LOWERCASE
	 * </div>
	 */
  text-transform: lowercase;
}
@include s-register-helper-class(
  t-uppercase,
  "sugar.text.transform.uppercase"
) {
  /**
	 * @name 		```.t-uppercase```
	 * Transform the text to uppercase
	 * @styleguide 	Helpers / Text Transform
	 * @example 	html
	 * <div class="t-uppercase">
	 * 	I'm uppercase
	 * </div>
	 */
  text-transform: uppercase;
}
@include s-register-helper-class(
  t-capitalize,
  "sugar.text.transform.capitalize"
) {
  /**
	 * @name 		```.t-capitalize```
	 * Capizalize the words
	 * @styleguide 	Helpers / Text Transform
	 * @example 	html
	 * <div class="t-capitalize">
	 * 	I'm capitalized
	 * </div>
	 */
  text-transform: capitalize;
}

//
// Fonts
//
@include s-register-helper-class(f-bold, "sugar.font.weight.bold") {
  /**
	 * @name 		```.f-bold```
	 * Set the font-weight to ```bold```
	 * @styleguide 	Helpers / Font Weight
	 * @example 	html
	 * This <span class="f-bold">word</span> is bold
	 */
  font-weight: bold;
}
@include s-register-helper-class(f-lighter, "sugar.font.weight.lighter") {
  /**
	 * @name 		```.f-lighter```
	 * Set the font-weight to ```lighter```
	 * @styleguide 	Helpers / Font Weight
	 * @example 	html
	 * 	This <span class="f-lighter">word</span> is lighter
	 */
  font-weight: lighter;
}
@include s-register-helper-class(f-bolder, "sugar.font.weight.bolder") {
  /**
	 * @name 		```.f-bolder```
	 * Set the font-weight to ```bolder```
	 * @styleguide 	Helpers / Font Weight
	 * @example 	html
	 * This <span class="f-bolder">word</span> is bolder
	 */
  font-weight: bolder;
}
@include s-register-helper-class(f-normal, "sugar.font.weight.normal") {
  /**
	 * @name 		```.f-normal```
	 * Set the font-weight to ```normal```
	 * @styleguide 	Helpers / Font Weight
	 * @example 	html
	 * <div class="f-bold">
	 * 	This <span class="f-normal">word</span> is normal
	 * </div>
	 */
  font-weight: normal;
  font-style: normal;
}
@include s-register-helper-class(f-italic, "sugar.font.style.italic") {
  /**
	 * @name 		```.f-italic```
	 * Set the font-style to ```italic```
	 * @styleguide 	Helpers / Font
	 * @example 	html
	 * This <span class="f-italic">word</span> is italic
	 */
  font-style: italic;
}
@include s-register-helper-class(f-oblique, "sugar.font.style.oblique") {
  /**
	 * @name 		```.f-oblique```
	 * Set the font-style to ```oblique```
	 * @styleguide 	Helpers / Font Style
	 * @example 	html
	 * This <span class="f-oblique">word</span> is oblique
	 */
  font-style: oblique;
}
@include s-register-helper-class(
  f-small-caps,
  "sugar.font.variant.small-caps"
) {
  /**
	 * @name 		```.f-small-caps```
	 * Set the font-variant to ```small-caps```
	 * @styleguide 	Helpers / Font Variant
	 * @example 	html
	 * This <span class="f-small-caps">word</span> is small-caps
	 */
  font-variant: small-caps;
}

//
// Blocks
//
@include s-register-helper-class(block-center, "sugar.block.align.center") {
  /**
	 * @name 		```.block-center```
	 * Set the element to as ```display:block``` and center it
	 * @styleguide 	Helpers / Block
	 * @example 	html
	 * <div class="block-center bkg-primary" style="width:100px;">
	 * 	I'm a centered block
	 * </div>
	 */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

//
// Images
//
@include s-register-helper-class(abs-cover, "sugar.size.abs.cover") {
  /**
	 * @name 		```.abs-cover```
	 * Set a size that will cover the entire parent surface by positionning it in absolute
	 * @styleguide 	Helpers / Sizes
	 * @example 	html
	 * <div class="ratio-16-9">
	 * 	<img src="https://source.unsplash.com/random" class="abs-cover" />
	 * </div>
	 */
  @include s-size(cover, $position: absolute);
}
@include s-register-helper-class(abs-contain, "sugar.size.abs.contain") {
  /**
	 * @name 		```.abs-contain```
	 * Set a size that will contain the entire parent surface by positionning it in absolute
	 * @styleguide 	Helpers / Sizes
	 * @example 	html
	 * <div class="ratio-16-9">
	 * 	<img src="https://source.unsplash.com/random" class="abs-contain" />
	 * </div>
	 */
  @include s-size(contain, $position: absolute);
}
@include s-register-helper-class(abs-fit, "sugar.size.abs.fit") {
  /**
	 * @name 		```.abs-fit```
	 * Set a size that will fit the entire parent surface by positionning it in absolute
	 * @styleguide 	Helpers / Sizes
	 * @example 	html
	 * <div class="ratio-16-9">
	 * 	<img src="https://source.unsplash.com/random" class="abs-fit" />
	 * </div>
	 */
  @include s-size(fit, $position: absolute);
}

//
// Media object
//
@include s-register-helper-class(mo, "sugar.media.object") {
  /**
	 * @name 		```.mo .mo--center .mo__content```
	 * Famous media object class
	 * @styleguide 	Helpers / Media object
	 * @example 	html
	 * <div class="mo">
	 *   <div class="mo__content">
	 *     <img src="https://source.unsplash.com/random/100x100" />
	 *   </div>
	 *   <div class="mo__content">
	 *     <h2 class="h3">Hello World</h2>
	 *     <p class="p">Phasellus fringilla aliquet justo eget pulvinar. Donec in justo leo.</p>
	 *   </div>
	 * </div>
	 */
  display: flex;
  flex-wrap: nowrap;

  @at-root {
    .mo--center {
      align-items: center;
    }
    .mo--end {
      align-items: flex-end;
    }
    .mo__content {
      flex: 0 1 auto;
    }
  }
}

//
// Clearfix
//
@include s-register-helper-class(clearfix, "sugar.clearfix.default") {
  /**
	 * @name 		```.clearfix```
	 * Apply the micro clearfix on the element
	 * @styleguide 	Helpers / Clearfix
	 * @example 	html
	 * <div class="clearfix bkg-primary">
	 * 	<div class="pull-right">right pulled</div>
	 * </div>
	 * <div class="bkg-primary">
	 * 	<div class="pull-right">right pulled without clearfix</div>
	 * </div>
	 */
  @include s-clearfix(micro);
}
@include s-register-helper-class(clearfix-float, "sugar.clearfix.float") {
  /**
	 * @name 		```.clearfix-float```
	 * Apply the float clearfix on the element
	 * @styleguide 	Helpers / Clearfix
	 * @example 	html
	 * <div class="clearfix-float bkg-primary">
	 * 	<div class="pull-right">right pulled</div>
	 * </div>
	 * <div class="bkg-primary">
	 * 	<div class="pull-right">right pulled without clearfix</div>
	 * </div>
	 */
  @include s-clearfix(float);
}
@include s-register-helper-class(clearfix-micro, "sugar.clearfix.micro") {
  /**
	 * @name 		```.clearfix```
	 * Apply the micro clearfix on the element
	 * @styleguide 	Helpers / Clearfix
	 * @example 	html
	 * <div class="clearfix bkg-primary">
	 * 	<div class="pull-right">right pulled</div>
	 * </div>
	 * <div class="bkg-primary">
	 * 	<div class="pull-right">right pulled without clearfix</div>
	 * </div>
	 */
  @include s-clearfix(micro);
}
@include s-register-helper-class(clearfix-overflow, "sugar.clearfix.overflow") {
  /**
	 * @name 		```.clearfix-overflow```
	 * Apply the overflow clearfix on the element
	 * @styleguide 	Helpers / Clearfix
	 * @example 	html
	 * <div class="clearfix-overflow bkg-primary">
	 * 	<div class="pull-right">right pulled</div>
	 * </div>
	 * <div class="bkg-primary">
	 * 	<div class="pull-right">right pulled without clearfix</div>
	 * </div>
	 */
  @include s-clearfix(overflow);
}
@include s-register-helper-class(clearfix-facebook, "sugar.clearfix.facebook") {
  /**
	 * @name 		```.clearfix-facebook```
	 * Apply the facebook clearfix on the element
	 * @styleguide 	Helpers / Clearfix
	 * @example 	html
	 * <div class="clearfix-facebook bkg-primary">
	 * 	<div class="pull-right">right pulled</div>
	 * </div>
	 * <div class="bkg-primary">
	 * 	<div class="pull-right">right pulled without clearfix</div>
	 * </div>
	 */
  @include s-clearfix(facebook);
}

//
// Ratios
//
@include s-register-helper-class(ratio-21-9, "sugar.ratio.21-9") {
  /**
	 * @name 		```.ratio-21-9```
	 * Keep a 16/9 ratio on a particular element. Applied by setting height to 0 and paddingtop to 100% / 16 * 9
	 * @styleguide 	Helpers / Ratios
	 * @example 	html
	 * <div class="bkg-primary ratio-21-9"></div>
	 */
  @include s-ratio(21/9);
}
@include s-register-helper-class(ratio-16-9, "sugar.ratio.16-9") {
  /**
	 * @name 		```.ratio-16-9```
	 * Keep a 16/9 ratio on a particular element. Applied by setting height to 0 and paddingtop to 100% / 16 * 9
	 * @styleguide 	Helpers / Ratios
	 * @example 	html
	 * <div class="bkg-primary ratio-16-9"></div>
	 */
  @include s-ratio(16/9);
}
@include s-register-helper-class(ratio-4-3, "sugar.ratio.4-3") {
  /**
	 * @name 		```.ratio-4-3```
	 * Keep a 4/3 ratio on a particular element. Applied by setting height to 0 and paddingtop to 100% / 4 * 3
	 * @styleguide 	Helpers / Ratios
	 * @example 	html
	 * <div class="bkg-primary ratio-4-3"></div>
	 */
  @include s-ratio(4/3);
}
@include s-register-helper-class(ratio-1-1, "sugar.ratio.1-1") {
  /**
	 * @name 		```.ratio-1-1```
	 * Keep a 1/1 ratio on a particular element. Applied by setting height to 0 and paddingtop to 100%
	 * @styleguide 	Helpers / Ratios
	 * @example 	html
	 * <div class="bkg-primary ratio-1-1"></div>
	 */
  @include s-ratio(1);
}

//
// Transition / Animation
//
@include s-register-helper-class(no-transitions, "sugar.no-transitions") {
  /**
	 * @name 		```.no-transitions```
	 * Disable the transitions <span class="f-bold">only on the element</span>
	 * @styleguide 	Helpers / Transitions
	 * @example 	html
	 * <div class="no-transitions">
	 * 	I have no more transitions
	 * 	<div>But I have</div>
	 * </div>
	 */
  &,
  &:before,
  &:after {
    transition: none !important;
  }
}
@include s-register-helper-class(clear-transitions, "sugar.clear-transitions") {
  /**
	 * @name 		```.clear-transitions```
	 * Disable the transitions <span class="f-bold">on the element and all his children</span>
	 * @styleguide 	Helpers / Transitions
	 * @example 	html
	 * <div class="clear-transitions">
	 * 	I have no more transitions
	 * 	<div>Me neither</div>
	 * </div>
	 */
  &,
  &:before,
  &:after,
  & *,
  & *:before,
  & *:after {
    transition: none !important;
  }
}
@include s-register-helper-class(no-animations, "sugar.no-animations") {
  /**
	 * @name 		```.no-animations```
	 * Disable the animations <span class="f-bold">only on the element</span>
	 * @styleguide 	Helpers / Animations
	 * @example 	html
	 * <div class="no-animations">
	 * 	I have no more animations
	 * 	<div>But I have</div>
	 * </div>
	 */
  &,
  &:before,
  &:after {
    animation: none !important;
  }
}
@include s-register-helper-class(clear-animations, "sugar.clear-animations") {
  /**
	 * @name 		```.clear-animations```
	 * Disable the transitions <span class="f-bold">on the element and all his children</span>
	 * @styleguide 	Helpers / Animations
	 * @example 	html
	 * <div class="clear-animations">
	 * 	I have no more animations
	 * 	<div>Me neither</div>
	 * </div>
	 */
  &,
  &:before,
  &:after,
  & *,
  & *:before,
  & *:after {
    animation: none !important;
  }
}
@include s-register-helper-class(no-transmations, "sugar.no-transmations") {
  /**
	 * @name 		```.no-transmations```
	 * Disable the animations and transitions <span class="f-bold">only on the element</span>
	 * @styleguide 	Helpers / Transmations
	 * @example 	html
	 * <div class="no-transmations">
	 * 	I have no more animations or transitions
	 * 	<div>But I have</div>
	 * </div>
	 */
  &,
  &:before,
  &:after {
    transition: none !important;
    animation: none !important;
  }
}
@include s-register-helper-class(
  clear-transmations,
  "sugar.clear-transmations"
) {
  /**
	 * @name 		```.clear-transmations```
	 * Disable the animations and transitions <span class="f-bold">on the element and all his children</span>
	 * @styleguide 	Helpers / Transmations
	 * @example 	html
	 * <div class="clear-transmations">
	 * 	I have no more animations or transitions
	 * 	<div>Me neither</div>
	 * </div>
	 */
  &,
  &:before,
  &:after,
  & *,
  & *:before,
  & *:after {
    transition: none !important;
    animation: none !important;
  }
}