/**
 * @name 	SCornerBadgeComponent Classes
 * This file provide the mixins to generate corner badge classes
 */

/**
 * Provide all the classes of the corner badge component like:
 * - ```.corner-badge```
 * - ```.corner-badge--tl```
 * - ```.corner-badge--tr```
 * - ```.corner-badge--bl```
 * - ```.corner-badge--br```
 * - ```.corner-badge--{color}```
 *
 * @param 		{List<String>} 		[$corners=tl tr bl br] 						The corners to generate
 * @param 		{List<Color>} 		[$colors=default primary secondary] 		The colors to generate
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@mixin s-corner-badge-classes(
  $corners: tl tr bl br,
  $colors: default primary secondary
) {
  @include s-corner-badge-classes-bare($corners);
  @include s-corner-badge-classes-style($colors);
}

/**
 * Provide all the bare classes of the corner badge component like:
 * - ```.corner-badge```
 * - ```.corner-badge--tl```
 * - ```.corner-badge--tr```
 * - ```.corner-badge--bl```
 * - ```.corner-badge--br```
 *
 * @param 		{List<String>} 		[$corners=tl tr bl br] 						The corners to generate
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@mixin s-corner-badge-classes-bare($corners: tl tr bl br) {
  @include s-component("corner-badge") {
    // @TODO parse properties
    @if $_sugar-test-arguments {
    }

    .#{s-component()} {
      @include s-corner-badge-bare(null);
    }

    @if (index($corners, tl)) {
      /**
			 * @name 	```.#{s-component()}--tl```
			 * @styleguide 	Objects / #{_start-case(s-component())}
			 * @example 	html
			 * <div class="#{s-component()} #{s-component()}--tl">
			 * 	<!-- content here -->
			 * </div>
			 */
      .#{s-component()}--tl {
        @include s-corner-badge-bare(tl);
      }
    }
    @if (index($corners, tr)) {
      /**
			 * @name 	```.#{s-component()}--tr```
			 * @styleguide 	Objects / #{_start-case(s-component())}
			 * @example 	html
			 * <div class="#{s-component()} #{s-component()}--tr">
			 * 	<!-- content here -->
			 * </div>
			 */
      .#{s-component()}--tr {
        @include s-corner-badge-bare(tr);
      }
    }
    @if (index($corners, bl)) {
      /**
			 * @name 	```.#{s-component()}--bl```
			 * @styleguide 	Objects / #{_start-case(s-component())}
			 * @example 	html
			 * <div class="#{s-component()} #{s-component()}--bl">
			 * 	<!-- content here -->
			 * </div>
			 */
      .#{s-component()}--bl {
        @include s-corner-badge-bare(bl);
      }
    }
    @if (index($corners, br)) {
      /**
			 * @name 	```.#{s-component()}--br```
			 * @styleguide 	Objects / #{_start-case(s-component())}
			 * @example 	html
			 * <div class="#{s-component()} #{s-component()}--br">
			 * 	<!-- content here -->
			 * </div>
			 */
      .#{s-component()}--br {
        @include s-corner-badge-bare(br);
      }
    }
  }
}

/**
 * Provide all the style classes of the corner badge component like:
 * - ```.corner-badge--{color}```
 *
 * @param 		{List<Color>} 		[$colors=default primary secondary] 		The colors to generate
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@mixin s-corner-badge-classes-style($colors: default primary secondary) {
  // @TODO parse properties
  @if $_sugar-test-arguments {
    // $colors : s-test-argument('s-corner-badge-classes-style','colors',map-keys(s-setting('colors')),$colors);
  }
  @include s-component("corner-badge") {
    @each $color in $colors {
      /**
			 * @name 	<span class="c-#{$color}">#{_start-case($color)}</span> ```.#{s-component()}--#{$color}```
			 * @styleguide 	Objects / #{_start-case(s-component())}
			 * @example 	html
			 * <div class="#{s-component()} #{s-component()}--tl #{s-component()}--#{$color}">
			 * 	<!-- content here -->
			 * </div>
			 */
      $sel: #{s-component()}--#{$color};
      .#{s-selector($sel)} {
        @include s-corner-badge-style($color);
      }
    }
  }
}