////
/// @group rail
////
/// A horizontal, flexible container for arranging diverse inline elements.
/// It provides a consistent layout for icons, labels, buttons, or other
/// modular components, aligning content to either end or centering it.
/// Item spacing is controlled via margins, allowing for individual item gap adjustments.

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

@use "../utils";
@use "../color";
@use "../selector";
@use "../layout";
@use "../element"; 

// Used for function fallback
$-fallbacks: (
  "separator" : (
    "function" : meta.get-function("get-rule-style", false, "element"),
    "arguments" : ("light",)
  ),
);


/// Module Settings
/// @type Map
/// @prop {Dimension} gap [1em] The default space between items in the rail
/// @prop {Map} gap-modifiers [("small" : 0.5em, "large" : 2em )] Alternate gaps (use child modifiers .rail__item--gap-[name], these apply gap changes between the item and the item before it
/// @prop {Dimension} margin-bottom [1em] The default space after rail
/// @prop {CssValue} separator [true] Pass border property for separator, defaults to element rule style light

$config: (
  "gap" : 1em,
  "margin-bottom" : 1em,
  "separator" : true,
  "gap-modifiers": (
    "small" : 0.5em,
    "none" : 0,
    "large" : 2em
  ),
) !default;

/// Change modules $config
/// @param {Map} $changes Map of changes
/// @example scss
///   @include ulu.component-rail-set(( "gap" : 1.5em ));

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

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

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

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

@mixin styles {
  $prefix: selector.class("rail"); 
  $gap: get("gap");

  #{ $prefix } {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: $gap;
    margin-bottom: get("margin-bottom");
    max-width: 100%;
  }

  // Modifiers
  // - Note: Originally had mods for each type of flexbox layout
  //   simplified to just agnostic naming and only what is currently needed
  //   can update this in the future to add more alignment options if 
  //   use cases come up

  #{ $prefix }--justified { 
    justify-content: space-between;
  }
  #{ $prefix }--baseline {
    align-items: baseline;
  }
  #{ $prefix }--nowrap {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  // Item level modifiers
  #{ $prefix }__item--pull {
    margin-inline-start: auto;
  }
  #{ $prefix }__item--separator {
    border-inline-start: get("separator");
    padding-inline-start: $gap;
  }

  @each $name, $value in get("gap-modifiers") {

    $calc-gap: $value - $gap;
    
    #{ $prefix }__item--gap-#{ $name } {
      margin-inline-start: $calc-gap;

      &#{ $prefix }__item--separator {
        padding-inline-start: $value;
      }
    }
  }
}