// Lightning Design System 2.29.1
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

/// Sizes in rems
/// @type map
/// @private
$_sizes: (
  'xxx-small': $size-xxx-small,
  'xx-small': $size-xx-small,
  'x-small': $size-x-small,
  'small': $size-small,
  'medium': $size-medium,
  'large': $size-large,
  'x-large': $size-x-large,
  'xx-large': $size-xx-large
);

/// Column sizes
/// @type array
/// @private
$_columnSizes: 1, 2, 3, 4, 5, 6, 7, 8, 12;

// All SLDS size classes like `slds-size--medium` and `slds-size--medium-1-of-12` in one string.
// This is faster for style calculation than `[class*="slds-size_"]`.
/// @private
@function all-sizes () {
  $prefixes: 'slds-size_', 'slds-size--';

  $result: '';
  @each $prefix in $prefixes {
    @each $size in map-keys($_sizes) {
      $result: "#{$result}, .#{$prefix}#{$size}";
    }
    @each $columnSize in $_columnSizes {
      @for $i from 1 through $columnSize {
        $result: "#{$result}, .#{$prefix}#{$i}-of-#{$columnSize}";
      }
    }
  }

  @return str-slice($result, 3); // Remove initial ", "
}

// All SLDS classes like `slds-small-size_medium` and `slds-small-size_1-of-12` in one string.
// Note that the first size is only a breakpoint size, and the second is all possible sizes.
// This is faster for style calculation than `[class*="slds-#{$breakpointSize}-size_"]`
/// @private
@function all-responsive-sizes ($breakpointSize, $prefix, $withColumnSizes) {
  $infixes: '-size_', '-size--';

  $result: '';

  @each $infix in $infixes {
    // e.g. `slds-small-size_medium`
    @each $size in map-keys($_sizes) {
      $result: "#{$result}, .#{$prefix}#{$breakpointSize}#{$infix}#{$size}";
    }
    // e.g. `slds-small-size_1_of_12`
    @if ($withColumnSizes) {
      @each $columnSize in $_columnSizes {
        @for $i from 1 through $columnSize {
          $result: "#{$result}, .#{$prefix}#{$breakpointSize}#{$infix}#{$i}-of-#{$columnSize}";
        }
      }
    }
  }
  @return str-slice($result, 3); // Remove initial ", "
}

/**
 * @selector .slds-size_small
 * @modifier
 */

// Absolute sizes (rem)
@each $name, $width in $_sizes {

  .slds-size_#{$name},
  .slds-size--#{$name} {
    width: $width;
  }
}

/**
 * @selector .slds-size_full
 * @modifier
 */
.slds-size_full {
  width: 100%;
}

// Relative sizes (%)
@include width();

// Ordering helpers
@for $i from 1 through 12 {

  .slds-order_#{$i},
  .slds-order--#{$i} {
    order: $i;
  }
}

// Generate responsive Sizing Helpers
//
// Loop through grid map checking for width name
// Map is stored in layout dependencies
//
// This loop generates around 500 selectors,
// make sure to test thoroughly when editing it.
@each $size in map-keys($breakpoints) {
  // Store nested value from map
  $breakpoint: map-get($breakpoints, $size);

  @media (min-width: #{pem($breakpoint)}) {

    // Fixes issue when sizing is used with slds-col
    #{all-responsive-sizes($size, 'slds-', true)} {
      flex: none;
    }

    // Generate responsive absolute (rem) width names,
    // e.g. <div class="slds-medium-size--x-small">
    @each $name, $width in $_sizes {

      .slds-#{$size}-size_#{$name},
      .slds-#{$size}-size--#{$name} {
        width: $width;
      }
    }

    // Generate responsive relative (%) width names,
    // e.g. <div class="slds-medium-size--3-of-6">
    @include width($breakpoint: #{$size});

    // Loop through column spread and generate
    // ordering helpers, e.g. <div class="slds-medium-order--2">
    @for $i from 1 through 12 {

      .slds-#{$size}-order_#{$i},
      .slds-#{$size}-order--#{$i} {
        order: $i;
      }
    }
  }

  @media (max-width: #{pem($breakpoint)}) {

    // Fixes issue when sizing is used with slds-col
    #{all-responsive-sizes($size, 'slds-max-', false)} {
      flex: none;
    }

    // Generate responsive absolute (rem) width names (up to size),
    // e.g. <div class="slds-max-medium-size--x-small">
    @each $name, $width in $_sizes {

      .slds-max-#{$size}-size_#{$name},
      .slds-max-#{$size}-size--#{$name} {
        width: $width;
      }
    }

    // Generate responsive relative (%) width names (up to size),
    // e.g. <div class="slds-max-medium-size--3-of-6">
    @include width($breakpoint: #{$size}, $max: true);

    // Loop through column spread and generate
    // ordering helpers, e.g. <div class="slds-max-medium-order--2">
    @for $i from 1 through 12 {

      .slds-max-#{$size}-order_#{$i},
      .slds-max-#{$size}-order--#{$i} {
        order: $i;
      }
    }
  }
}

// Fixes issue when sizing is used with slds-col
#{all-sizes()} {
  flex: none;
}