////
/// @group list-lines
////

@use "sass:map";
@use "sass:meta";

@use "../element";
@use "../typography";
@use "../selector";
@use "../utils";

// Used for function fallback
$-fallbacks: (
  "dense-line-height" : (
    "function" : meta.get-function("get", false, "typography"),
    "property" : "line-height-dense"
  ),
);

/// Module Config
/// @prop {Boolean} border-first [true] If enabled, adds a top border to the first item in list-lines.
/// @prop {Boolean} border-last [true] If enabled, adds a bottom border to the last item in list-lines.
/// @prop {String} rule-style ["light"] Name of element > rule style to use for divider/border
/// @prop {Dimension} margin-bottom [1em] Bottom margin of list.
/// @prop {Dimension} margin-top [0] Top margin of list.
/// @prop {Dimension} padding-between [1em] Padding between items in list.
/// @prop {Dimension} padding-between [1em] Padding between items in list when using dense modifier
/// @prop {Dimension} line-height-dense [true] Line height when list lines has dense modifier (defaults to typography line-height-dense)

$config: (
  "border-first" : true,
  "border-last" : true,
  "margin-bottom": 1em,
  "margin-top": 0,
  "rule-style" : "light",
  "padding-between" : 1em,
  "dense-padding-between" : 0.65em,
  "dense-line-height" : true
) !default;

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

@function get($name) {
  $value: utils.require-map-get($config, $name, "list-lines [config]");
  @return utils.function-fallback($name, $value, $-fallbacks);
}

/// Output component stylesheet
/// @example scss
///  @include ulu.component-list-lines-styles();

@mixin styles {
  $prefix: selector.class("list-lines");
  $border: element.get-rule-style(get("rule-style"));

  #{ $prefix } {
    list-style: none;
    margin: get("margin-top") 0 get("margin-bottom") 0;
    padding: 0;
    @if (get("border-first")) {
      border-top: $border;
    }
    >li {
      border-bottom: $border;
      padding: get("padding-between") 0;
      >*:last-child {
        margin-bottom: 0;
      }
      @if (not get("border-last")) {
        &:last-child {
          border-bottom-width: 0;
        }
      }
    }
  }
  #{ $prefix }--dense {
    >li {
      padding: get("dense-padding-between") 0;
      line-height: get("dense-line-height");
    }
  }
}