$_sugar-classes-inited: false;
/**
 * Register all the dynamic helper classes that depends on the settings, etc...
 * This is used internaly
 *
 * @example
 * \@include s-init-classes();
 *
 * @author 			Olivier Bossel <olivier.bossel@gmail.com> (https://olivierbossel.com)
 */
@mixin s-init-classes() {
  @if not $_sugar-classes-inited {
    $_sugar-classes-inited: true !global;

    $filters: s-setting("filters");
    @each $name, $filter in $filters {
      /**
			 * @name 	```.fi-#{$name}```
			 * @styleguide  	Helpers / Filters
			 * @example 	html
			 * <div class="fi-#{$name}">
			 * 	I'm filtered with #{$name}
			 * </div>
			 */
      @include s-register-helper-class(
        $classname: "fi-#{$name}",
        $namespace: "sugar.filter.#{$name}"
      ) {
        @include s-filter($filter);
      }
    }

    // transitions
    $transitions: s-setting("transitions");
    @each $name, $transition in $transitions {
      /**
			 * @name 	```.tr-#{$name}```
			 * @styleguide  	Helpers / Transitions
			 * @example 	html
			 * <div class="tr-#{$name}">
			 * 	I'm transitionned with #{$name}
			 * </div>
			 */
      @include s-register-helper-class(
        $classname: "tr-#{$name}",
        $namespace: "sugar.transition.#{$name}"
      ) {
        @include s-transition($transition);
      }
    }

    @each $name, $font in s-setting("fonts") {
      /**
			 * @name 	```.f-#{$name}```
			 * @styleguide  	Fonts / Classes
			 * @example 	html
			 * <div class="f-#{$name}">
			 * 	I have the font "#{$name}" applied
			 * </div>
			 */
      @include s-register-helper-class(
        $classname: "f-#{$name}",
        $namespace: "sugar.font.family.#{$name}"
      ) {
        @include s-font($name);
      }
    }

    $sizes: s-setting("sizes");
    @each $name, $size in $sizes {
      $cname: "m-b-#{$name}";
      @if $name == "default" {
        $cname: "m-b";
      }
      /**
			 * @name 	```.#{$cname}```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div class="#{$cname}" style="background:#{s-color(primary)}; width:100px; height:5px"></div>
			 * <div style="background:#{s-color(secondary)}; width:100px; height:5px"></div>
			 */
      @include s-register-helper-class(
        $classname: $cname,
        $namespace: "sugar.margin.bottom.#{$name}"
      ) {
        margin-bottom: s-space($name);
      }
      $cname: "m-t-#{$name}";
      @if $name == "default" {
        $cname: "m-t";
      }
      /**
			 * @name 	```.#{$cname}```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div style="background:#{s-color(primary)}; width:100px; height:5px"></div>
			 * <div class="#{$cname}" style="background:#{s-color(secondary)}; width:100px; height:5px"></div>
			 */
      @include s-register-helper-class(
        $classname: $cname,
        $namespace: "sugar.margin.top.#{$name}"
      ) {
        margin-top: s-space($name);
      }
      $cname: "m-l-#{$name}";
      @if $name == "default" {
        $cname: "m-l";
      }
      /**
			 * @name 	```.#{$cname}```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div style="display:inline-block; background:#{s-color(primary)}; width:50px; height:50px"></div>
			 * <div class="#{$cname}" style="display:inline-block; background:#{s-color(secondary)}; width:50px; height:50px"></div>
			 */
      @include s-register-helper-class(
        $classname: $cname,
        $namespace: "sugar.margin.left.#{$name}"
      ) {
        margin-left: s-space($name);
      }
      $cname: "m-r-#{$name}";
      @if $name == "default" {
        $cname: "m-r";
      }
      /**
			 * @name 	```.#{$cname}```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div class="#{$cname}" style="display:inline-block; background:#{s-color(primary)}; width:50px; height:50px"></div>
			 * <div style="display:inline-block; background:#{s-color(secondary)}; width:50px; height:50px"></div>
			 */
      @include s-register-helper-class(
        $classname: $cname,
        $namespace: "sugar.margin.right.#{$name}"
      ) {
        margin-right: s-space($name);
      }
      $cname: "m-s-#{$name}";
      @if $name == "default" {
        $cname: "m-s";
      }
      /**
			 * @name 	```.#{$cname}```
			 * @styleguide  	Layout / Margins
			 * @example 	html
			 * <div class="#{$cname}" style="display:inline-block; background:#{s-color(primary)}; width:50px; height:50px"></div>
			 * <div style="display:inline-block; background:#{s-color(secondary)}; width:50px; height:50px"></div>
			 */
      @include s-register-helper-class(
        $classname: $cname,
        $namespace: "sugar.margin.side.#{$name}"
      ) {
        margin-left: s-space($name);
        margin-right: s-space($name);
      }

      $cname: "p-#{$name}";
      @if $name == "default" {
        $cname: "p";
      }
      /**
			 * @name 	```.#{$cname}```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="#{$cname}" style="border:1px solid #{s-color(primary)}; width:150px; height:150px;">
			 * 	<div style="background:#{s-color(secondary)}; width:100%; height:100%"></div>
			 * </div>
			 */
      @include s-register-helper-class(
        $classname: $cname,
        $namespace: "sugar.padding.all.#{$name}"
      ) {
        @if $name == "default" {
          &:not(p) {
            padding: s-space($name);
          }
        } @else {
          padding: s-space($name);
        }
      }
      $cname: "p-b-#{$name}";
      @if $name == "default" {
        $cname: "p-b";
      }
      /**
			 * @name 	```.#{$cname}```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="#{$cname}" style="border:1px solid #{s-color(primary)}; width:150px; height:150px;">
			 * 	<div style="background:#{s-color(secondary)}; width:100%; height:100%"></div>
			 * </div>
			 */
      @include s-register-helper-class(
        $classname: $cname,
        $namespace: "sugar.padding.bottom.#{$name}"
      ) {
        padding-bottom: s-space($name);
      }
      $cname: "p-t-#{$name}";
      @if $name == "default" {
        $cname: "p-t";
      }
      /**
			 * @name 	```.#{$cname}```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="#{$cname}" style="border:1px solid #{s-color(primary)}; width:150px; height:150px;">
			 * 	<div style="background:#{s-color(secondary)}; width:100%; height:100%"></div>
			 * </div>
			 */
      @include s-register-helper-class(
        $classname: $cname,
        $namespace: "sugar.padding.top.#{$name}"
      ) {
        padding-top: s-space($name);
      }
      $cname: "p-l-#{$name}";
      @if $name == "default" {
        $cname: "p-l";
      }
      /**
			 * @name 	```.#{$cname}```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="#{$cname}" style="border:1px solid #{s-color(primary)}; width:150px; height:150px;">
			 * 	<div style="background:#{s-color(secondary)}; width:100%; height:100%"></div>
			 * </div>
			 */
      @include s-register-helper-class(
        $classname: $cname,
        $namespace: "sugar.padding.left.#{$name}"
      ) {
        padding-left: s-space($name);
      }
      $cname: "p-r-#{$name}";
      @if $name == "default" {
        $cname: "p-r";
      }
      /**
			 * @name 	```.#{$cname}```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="#{$cname}" style="border:1px solid #{s-color(primary)}; width:150px; height:150px;">
			 * 	<div style="background:#{s-color(secondary)}; width:100%; height:100%"></div>
			 * </div>
			 */
      @include s-register-helper-class(
        $classname: $cname,
        $namespace: "sugar.padding.right.#{$name}"
      ) {
        padding-right: s-space($name);
      }
      $cname: "p-s-#{$name}";
      @if $name == "default" {
        $cname: "p-s";
      }
      /**
			 * @name 	```.#{$cname}```
			 * @styleguide  	Layout / Paddings
			 * @example 	html
			 * <div class="#{$cname}" style="border:1px solid #{s-color(primary)}; width:150px; height:150px;">
			 * 	<div style="background:#{s-color(secondary)}; width:100%; height:100%"></div>
			 * </div>
			 */
      @include s-register-helper-class(
        $classname: $cname,
        $namespace: "sugar.padding.side.#{$name}"
      ) {
        padding-left: s-space($name);
        padding-right: s-space($name);
      }
    }

    //
    // Text size
    //
    @each $size, $value in s-setting("sizes") {
      /**
			 * @name 	```.s-#{$size}```
			 * @styleguide  	Layout / Sizes
			 * @example 	html
			 * <div class="s-#{$size}">
			 * 	I have the size "#{$size}" defined
			 * </div>
			 */
      @include s-register-helper-class(s-#{$size}, "sugar.size.#{$size}") {
        font-size: s-rem($value);
      }
      /**
			 * @name 	```.s-#{$size}-rel```
			 * @styleguide  	Layout / Sizes
			 * @example 	html
			 * <div class="s-#{$size}-rel">
			 * 	I have the size "#{$size}" defined relative to my parent
			 * </div>
			 */
      @include s-register-helper-class(
        s-#{$size}-rel,
        "sugar.size.rel.#{$size}"
      ) {
        font-size: s-em($value);
      }
    }

    /**
		 * @name 	```.no-p-t```
		 * Reset **top** padding
		 * @styleguide  	Layout / No padding
		 * @example 	html
		 * <div class="no-p-t" style="display:inline-block; background:#{s-color(primary)}; width:50px; height:50px;"></div>
		 */
    @include s-register-helper-class(no-p-t, "sugar.padding.no.top") {
      padding-top: 0 !important;
    }
    /**
		 * @name 	```.no-p-r```
		 * Reset **right** padding
		 * @styleguide  	Layout / No padding
		 * @example 	html
		 * <div class="no-p-r" style="display:inline-block; background:#{s-color(primary)}; width:50px; height:50px;"></div>
		 */
    @include s-register-helper-class(no-p-r, "sugar.padding.no.right") {
      padding-right: 0 !important;
    }
    /**
		 * @name 	```.no-p-b```
		 * Reset **bottom** padding
		 * @styleguide  	Layout / No padding
		 * @example 	html
		 * <div class="no-p-b" style="display:inline-block; background:#{s-color(primary)}; width:50px; height:50px;"></div>
		 */
    @include s-register-helper-class(no-p-b, "sugar.padding.no.bottom") {
      padding-bottom: 0 !important;
    }
    /**
		 * @name 	```.no-p-l```
		 * Reset **left** padding
		 * @styleguide  	Layout / No padding
		 * @example 	html
		 * <div class="no-p-l" style="display:inline-block; background:#{s-color(primary)}; width:50px; height:50px;"></div>
		 */
    @include s-register-helper-class(no-p-l, "sugar.padding.no.left") {
      padding-left: 0 !important;
    }
    /**
		 * @name 	```.no-p-s```
		 * Reset **left** and **right** paddings
		 * @styleguide  	Layout / No padding
		 * @example 	html
		 * <div class="no-p-s" style="display:inline-block; background:#{s-color(primary)}; width:50px; height:50px;"></div>
		 */
    @include s-register-helper-class(no-p-s, "sugar.padding.no.side") {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    /**
		 * @name 	```.no-m-t```
		 * Reset **top** padding
		 * @styleguide  	Layout / No margin
		 * @example 	html
		 * <div class="no-m-t" style="display:inline-block; background:#{s-color(primary)}; width:50px; height:50px;"></div>
		 */
    @include s-register-helper-class(no-m-t, "sugar.margin.no.top") {
      margin-top: 0 !important;
    }
    /**
		 * @name 	```.no-m-r```
		 * Reset **right** padding
		 * @styleguide  	Layout / No margin
		 * @example 	html
		 * <div class="no-m-r" style="display:inline-block; background:#{s-color(primary)}; width:50px; height:50px;"></div>
		 */
    @include s-register-helper-class(no-m-r, "sugar.margin.no.right") {
      margin-right: 0 !important;
    }
    /**
		 * @name 	```.no-m-b```
		 * Reset **bottom** padding
		 * @styleguide  	Layout / No margin
		 * @example 	html
		 * <div class="no-m-b" style="display:inline-block; background:#{s-color(primary)}; width:50px; height:50px;"></div>
		 */
    @include s-register-helper-class(no-m-b, "sugar.margin.no.bottom") {
      margin-bottom: 0 !important;
    }
    /**
		 * @name 	```.no-m-l```
		 * Reset **left** padding
		 * @styleguide  	Layout / No margin
		 * @example 	html
		 * <div class="no-m-l" style="display:inline-block; background:#{s-color(primary)}; width:50px; height:50px;"></div>
		 */
    @include s-register-helper-class(no-m-l, "sugar.margin.no.left") {
      margin-left: 0 !important;
    }
    /**
		 * @name 	```.no-m-s```
		 * Reset **left** and **right** margins
		 * @styleguide  	Layout / No padding
		 * @example 	html
		 * <div class="no-m-s" style="display:inline-block; background:#{s-color(primary)}; width:50px; height:50px;"></div>
		 */
    @include s-register-helper-class(no-m-s, "sugar.margin.no.side") {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    // colors
    $colors: s-setting("colors");
    @each $name, $color in $colors {
      @if $name != classes {
        $modifiers: ();
        @if type-of($color) == map {
          $modifiers: map-get($color, modifiers);
          $color: map-get($color, color);
        }
        $cls: unquote("c-#{$name}");
        /**
				 * @name 	```.#{$cls}```
				 * Specify the color to **#{$name}**
				 * @styleguide  	Colors / Classes
				 * @example 	html
				 * <div class="#{$cls}">
				 * 	I'm in "#{$name}" color
				 * </div>
				 */
        @include s-register-helper-class(
          $classname: $cls,
          $namespace: "sugar.color.#{$name}.color"
        ) {
          color: s-color($name);
        }
        $cls: unquote("bkg-#{$name}");
        /**
				 * @name 	```.#{$cls}```
				 * Specify the background color to **#{$name}**
				 * @styleguide  	Colors / Classes
				 * @example 	html
				 * <div class="#{$cls} p" style="color:white">
				 * 	My background color is "#{$name}"
				 * </div>
				 */
        @include s-register-helper-class(
          $classname: $cls,
          $namespace: "sugar.color.#{$name}.bkg"
        ) {
          background-color: s-color($name);
        }

        $cls: unquote("b-#{$name}");
        /**
				 * @name 	```.#{$cls}```
				 * Specify the border of 1px solid to **#{$name}**
				 * @styleguide  	Colors / Classes
				 * @example 	html
				 * <div class="#{$cls}">
				 * 	I have a #{$name} border color
				 * </div>
				 */
        @include s-register-helper-class(
          $classname: $cls,
          $namespace: "sugar.border.#{$name}.all"
        ) {
          border: s-rem(1px) solid s-color($name);
        }

        $cls: unquote("b-t-#{$name}");
        /**
				 * @name 	```.#{$cls}```
				 * Specify the border top of 1px solid to **#{$name}**
				 * @styleguide  	Colors / Classes
				 * @example 	html
				 * <div class="#{$cls}">
				 * 	I have a #{$name} border top color
				 * </div>
				 */
        @include s-register-helper-class(
          $classname: $cls,
          $namespace: "sugar.border.#{$name}.top"
        ) {
          border-top: s-rem(1px) solid s-color($name);
        }

        $cls: unquote("b-r-#{$name}");
        /**
				 * @name 	```.#{$cls}```
				 * Specify the border right of 1px solid to **#{$name}**
				 * @styleguide  	Colors / Classes
				 * @example 	html
				 * <div class="#{$cls}">
				 * 	I have a #{$name} border right color
				 * </div>
				 */
        @include s-register-helper-class(
          $classname: $cls,
          $namespace: "sugar.border.#{$name}.right"
        ) {
          border-right: s-rem(1px) solid s-color($name);
        }

        $cls: unquote("b-b-#{$name}");
        /**
				 * @name 	```.#{$cls}```
				 * Specify the border bottom of 1px solid to **#{$name}**
				 * @styleguide  	Colors / Classes
				 * @example 	html
				 * <div class="#{$cls}">
				 * 	I have a #{$name} border bottom color
				 * </div>
				 */
        @include s-register-helper-class(
          $classname: $cls,
          $namespace: "sugar.border.#{$name}.bottom"
        ) {
          border-bottom: s-rem(1px) solid s-color($name);
        }

        $cls: unquote("b-l-#{$name}");
        /**
				 * @name 	```.#{$cls}```
				 * Specify the border left of 1px solid to **#{$name}**
				 * @styleguide  	Colors / Classes
				 * @example 	html
				 * <div class="#{$cls}">
				 * 	I have a #{$name} border left color
				 * </div>
				 */
        @include s-register-helper-class(
          $classname: $cls,
          $namespace: "sugar.border.#{$name}.left"
        ) {
          border-left: s-rem(1px) solid s-color($name);
        }

        $cls: unquote("b-s-#{$name}");
        /**
				 * @name 	```.#{$cls}```
				 * Specify the border side of 1px solid to **#{$name}**
				 * @styleguide  	Colors / Classes
				 * @example 	html
				 * <div class="#{$cls}">
				 * 	I have a #{$name} border side color
				 * </div>
				 */
        @include s-register-helper-class(
          $classname: $cls,
          $namespace: "sugar.border.#{$name}.side"
        ) {
          border-left: s-rem(1px) solid s-color($name);
          border-right: s-rem(1px) solid s-color($name);
        }

        // modifiers
        @if $modifiers {
          @each $mod-name, $mod in $modifiers {
            $cls: unquote("c-#{$name}--#{$mod-name}");
            /**
						 * @name 	```.#{$cls}```
						 * Specify the color to **#{$name}--#{$mod-name}**
						 * @styleguide  	Colors / Classes
						 * @example 	html
						 * <div class="#{$cls}">
						 * 	I'm in "#{$name}--#{$mod-name}" color
						 * </div>
						 */
            @include s-register-helper-class(
              $classname: $cls,
              $namespace: "sugar.color.#{$name}.modifier.#{$mod-name}.color"
            ) {
              color: s-color($name, $mod-name);
            }
            $cls: unquote("bkg-#{$name}--#{$mod-name}");
            /**
						 * @name 	```.#{$cls}```
						 * Specify the background color to **#{$name}--#{$mod-name}**
						 * @styleguide  	Colors / Classes
						 * @example 	html
						 * <div class="#{$cls} p" style="color:white">
						 * 	My background color is "#{$name}--#{$mod-name}"
						 * </div>
						 */
            @include s-register-helper-class(
              $classname: $cls,
              $namespace: "sugar.color.#{$name}.modifier.#{$mod-name}.bkg"
            ) {
              background-color: s-color($name, $mod-name);
            }

            $cls: unquote("b-#{$name}--#{$mod-name}");
            /**
						 * @name 	```.#{$cls}```
						 * Specify the border of 1px solid to **#{$name}--#{$mod-name}**
						 * @styleguide  	Colors / Classes
						 * @example 	html
						 * <div class="#{$cls}">
						 * 	I have a "#{$name}--#{$mod-name}" border color
						 * </div>
						 */
            @include s-register-helper-class(
              $classname: $cls,
              $namespace: "sugar.border.#{$name}.modifier.#{$mod-name}.all"
            ) {
              border: s-rem(1px) solid s-color($name, $mod-name);
            }
            $cls: unquote("b-t-#{$name}--#{$mod-name}");
            /**
						 * @name 	```.#{$cls}```
						 * Specify the border top of 1px solid to **#{$name}--#{$mod-name}**
						 * @styleguide  	Colors / Classes
						 * @example 	html
						 * <div class="#{$cls}">
						 * 	I have a "#{$name}--#{$mod-name}" border top color
						 * </div>
						 */
            @include s-register-helper-class(
              $classname: $cls,
              $namespace: "sugar.border.#{$name}.modifier.#{$mod-name}.top"
            ) {
              border-top: s-rem(1px) solid s-color($name, $mod-name);
            }
            $cls: unquote("b-r-#{$name}--#{$mod-name}");
            /**
						 * @name 	```.#{$cls}```
						 * Specify the border right of 1px solid to **#{$name}--#{$mod-name}**
						 * @styleguide  	Colors / Classes
						 * @example 	html
						 * <div class="#{$cls}">
						 * 	I have a "#{$name}--#{$mod-name}" border right color
						 * </div>
						 */
            @include s-register-helper-class(
              $classname: $cls,
              $namespace: "sugar.border.#{$name}.modifier.#{$mod-name}.right"
            ) {
              border: s-rem(1px) solid s-color($name, $mod-name);
            }
            $cls: unquote("b-b-#{$name}--#{$mod-name}");
            /**
						 * @name 	```.#{$cls}```
						 * Specify the border bottom of 1px solid to **#{$name}--#{$mod-name}**
						 * @styleguide  	Colors / Classes
						 * @example 	html
						 * <div class="#{$cls}">
						 * 	I have a "#{$name}--#{$mod-name}" border bottom color
						 * </div>
						 */
            @include s-register-helper-class(
              $classname: $cls,
              $namespace: "sugar.border.#{$name}.modifier.#{$mod-name}.bottom"
            ) {
              border: s-rem(1px) solid s-color($name, $mod-name);
            }
            $cls: unquote("b-l-#{$name}--#{$mod-name}");
            /**
						 * @name 	```.#{$cls}```
						 * Specify the border left of 1px solid to **#{$name}--#{$mod-name}**
						 * @styleguide  	Colors / Classes
						 * @example 	html
						 * <div class="#{$cls}">
						 * 	I have a "#{$name}--#{$mod-name}" border left color
						 * </div>
						 */
            @include s-register-helper-class(
              $classname: $cls,
              $namespace: "sugar.border.#{$name}.modifier.#{$mod-name}.left"
            ) {
              border-left: s-rem(1px) solid s-color($name, $mod-name);
            }
            $cls: unquote("b-s-#{$name}--#{$mod-name}");
            /**
						 * @name 	```.#{$cls}```
						 * Specify the border side of 1px solid to **#{$name}--#{$mod-name}**
						 * @styleguide  	Colors / Classes
						 * @example 	html
						 * <div class="#{$cls}">
						 * 	I have a "#{$name}--#{$mod-name}" border side color
						 * </div>
						 */
            @include s-register-helper-class(
              $classname: $cls,
              $namespace: "sugar.border.#{$name}.modifier.#{$mod-name}.side"
            ) {
              border-left: s-rem(1px) solid s-color($name, $mod-name);
              border-right: s-rem(1px) solid s-color($name, $mod-name);
            }
          }
        }
      }
    }
  }
}