// ----
// libsass (v3.2.5)
// ----

@import "susy";
// Only for testing purpose
$susy: (
	columns: 12,
	gutters: 1/4,
);

////
/// List collections configuration and mixin
/// @group Objects
////

/// Map with the list-collections default configuration
///
/// @prop {number}  elements-per-row - Number of elements in a row
/// @prop {number}  spacing-bottom - Spacing to set the bottom margin
/// @prop {list}    ratio - Ratio to set the proportion of the element
/// @prop {number}  title-font-size - Font-size for the collection title
/// @prop {number}  number-font-size - Font-size for the app number
$list-collection-defaults: (
    'elements-per-row': 2,
    'spacing-bottom': 2,
    'ratio': ( 1, 1 ),
    'title-font-size': 20,
    'number-font-size': 13
);

/// Mixin to generate the classes for the different collections lists
/// according to the layout.
///
/// @param {map} $params - Sass map with the parameters to configure the mixin
/// @example
/// .list-collections {
///     @include list-collections( (
///         'elements-per-row': 3,
///         'spacing-bottom': 3,
///         'title-font-size': 24,
///         'number-font-size': 15
///         )
///     );
/// }
///
@mixin list-collections( $params: (), $defaults: $list-collection-defaults ) {
    $columns: susy-get( columns );
    $config: map-merge( $defaults, $params );
    $elements-per-row: map-get( $config, 'elements-per-row' );
    $spacing-bottom: map-get( $config, 'spacing-bottom' );
    $ratio: map-get( $config, 'ratio');
    $title-font-size: map-get( $config, 'title-font-size' );
    $number-font-size: map-get( $config, 'number-font-size' );
    $size: $columns / $elements-per-row;
    $container-ratio: nth( $ratio, 2 ) / nth( $ratio, 1 );

    & {
      display: block;
      // Mixin real content
    }
    //Test classes
    .cols {
      content: $elements-per-row;
    }
    .col-size {
      content: $size;
    }
    .proportion {
      content: $container-ratio;
    }
    .title {
      font-size: $title-font-size+"px";
    }
    .number {
      font-size: $number-font-size+"px";
    }
}


// List collection default
.list-collections {
    @include list-collections;
}

// List collection wide
.list-collections-wide {
    @include list-collections( (
        'elements-per-row': 3,
        'spacing-bottom': 3,
        'ratio': ( 2, 1 ),
        'title-font-size': 24,
        'number-font-size': 16
    ) );
}