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

@use "sass:map";

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

/// Module Settings
/// @type Map
/// @prop {CssValue} compact-template-columns [1fr 1fr 1fr] The template-columns of the card-grid--compact.
/// @prop {Dimension} compact-gap [1rem] The grid gap of the card-grid--compact.
/// @prop {Dimension} gap [2rem] The grid gap of the card-grid.
/// @prop {CssValue} template-columns [1fr 1fr] The template-columns of the card-grid.

$config: (
  "gap" : 2rem,
  "template-columns" : 1fr 1fr,
  "compact-gap" : 1rem,
  "compact-template-columns" : 1fr 1fr 1fr,
) !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: get("template-columns");
    grid-auto-rows: 1fr;
    gap: get("gap");
    margin: get("gap") 0;
    #{ $prefix-card } {
      max-width: none;
      margin: 0;
      &:not(#{ $prefix-card }--overlay) {
        height: 100%;
      }
    }
  }
  #{ $prefix }--compact {
    grid-template-columns: get("compact-template-columns");
    gap: get("compact-gap");
  }
  @include breakpoint.max("small") {
    #{ $prefix } {
      grid-template-columns: 1fr;
    }
  }
}