/* *****************************************************************************
*
*  Borders
*
* ***************************************************************************** */

/**
  @mixin createClassBorders($bordersMap, $themeVariantsMap){
    $borderMap<Map>             An array of the borders property and abbreviation used for the OOCSS class name.
    $themeVariantsMap<Map>      An array of value of each variant to be assign to each property and breakpoints.
  -------------------------------------------------------------

  input :

  $allBordersGray: (
    'border-top': 'border-top-gray',
    'border-bottom': 'border-bottom-gray',
    'border-left':'border-left-gray',
    'border-right':'border-right-gray',
  );
  @include createClassBorders($allBordersGray, $grays);

  -------------------------------------------------------------

  output :  .border-top-gray--0 { ... }
            .border-top-gray-sm--0 { ... } // Within the sm media-query breakpoint and up
            .border-top-gray-md--0 { ...} // Within the md media-query breakpoint and up
            .border-top-gray-lg--0 { ... } // Within the lg media-query breakpoint and up

            // All theme colors available
            .border-top-gray--100 { ... }
            .border-top-gray-sm--100  { ...} // Within the sm media-query breakpoint and up
            ...
 */
@mixin createClassBorders($bordersMap, $themeVariantsMap){
  @each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-up($breakpoint) {
      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

      @each $prop, $abbrev in $bordersMap {
        @each $variant, $value in $themeVariantsMap {
          .#{$abbrev}#{$infix}--#{$variant} {
            #{$prop}: $border-width solid $value;
          }
        }

        .#{$abbrev}#{$infix}--0 {
          #{$prop}: none !important;
        }
      }
    }
  }
}