////
/// @group card-grid
/// Lightweight CSS Grid setup for card components
////

@use "sass:map";

@use "../breakpoint";
@use "../utils";
@use "../selector";

/// Module Settings
/// @type Map
/// @prop {Dimension} gap [1.5rem] The grid gap of the card-grid.
/// @prop {Dimension} min-width [20rem] The min-width for the implicit grid columns.
/// @prop {Dimension} compact-gap [0.75rem] The grid gap of the card-grid--compact.
/// @prop {Dimension} compact-min-width [14rem] The min-width for the implicit grid columns of the card-grid--compact.

$config: (
  "gap" : 1.5rem,
  "min-width" : 20rem,
  "compact-gap" : 0.75rem,
  "compact-min-width" : 14rem,
) !default;

/// Change modules $config
/// @param {Map} $changes Map of changes
/// @example scss
///   @include ulu.component-card-grid-set(( "property" : value ));

@mixin set($changes) {
  $config: map.merge($config, $changes) !global;
}

/// Get a config option
/// @param {Map} $name Name of property
/// @example scss
///   @include ulu.component-card-grid-get("property");

@function get($name) {
  @return utils.require-map-get($config, $name, "card-grid [config]");
}

/// Prints component styles
/// @example scss
///  @include ulu.component-card-grid-styles();

@mixin styles {
  $prefix: selector.class("card-grid");
  $prefix-card: selector.class("card");
  
  #{ $prefix } {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, get("min-width")), 1fr));
    grid-auto-rows: 1fr;
    gap: get("gap");
    margin: get("gap") 0;
    #{ $prefix-card } {
      margin: 0;
      &:not(#{ $prefix-card }--overlay) {
        height: 100%;
      }
    }
  }
  #{ $prefix }--compact {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, get("compact-min-width")), 1fr));
    gap: get("compact-gap");
  }
  #{ $prefix }--one-column {
    grid-template-columns: 1fr;
  }
  #{ $prefix }--rows-fit {
    grid-auto-rows: auto;
  }
}