////
/// @group flipcard-grid
////
/// Creates adaptive (changing at breakpoints)n between items (vertical/horizontal layout)

@use "sass:map";

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

/// Module Settings
/// @type Map
/// @prop {Dimension} gutter [1rem] The gutter between grid items.
/// @prop {CssValue} grid-template-columns [1fr 1fr] The size ratio of items in the grid.


$config: (
  "gutter" : 1rem,
  "grid-template-columns" : 1fr 1fr,
  "breakpoint" : "small"
);

/// Change modules $config
/// @param {Map} $changes Map of changes
/// @example scss
///   @include ulu.component-flipcard-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-flipcard-grid-get("property");

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

/// Output component stylesheet
/// @example scss
///  @include ulu.component-flipcard-grid-styles();

@mixin styles {
  $prefix: selector.class("flipcard-grid");

  #{ $prefix } {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    justify-items: stretch;
    gap: get("gutter");
    list-style: none !important; // B/c in Editor
    padding: 0 !important; // B/c in Editor
    @if (breakpoint.exists(get("breakpoint"))) {
      @include breakpoint.min(get("breakpoint")) {
        grid-template-columns: get("grid-template-columns");
      }
    }
  }
  #{ $prefix }__item {
    margin: 0 !important; // B/c in Editor
  }
}