////
/// @group rule
////

@use "sass:map";
@use "../utils";
@use "../element";
@use "../selector";

/// Module Settings
/// @type Map
/// @prop {Dimension} short-border-width [4px] Short rule width of border
/// @prop {Object} short-modifiers [false] Objects to adjust the styles of different short rule styles.
/// @prop {Dimension} short-width [2.75rem] Short rule width (like an inline rule, normally used above headings), Setting this to false will disable output

$config: (
  "short-border-width" : 4px,
  "short-modifiers" : false,
  "short-width" : 2.75rem,
) !default;

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

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

/// Output styles
/// @example scss
///  @include ulu.component-rule-styles();

@mixin styles {

  $class: selector.class("rule");
  
  #{ $class } {
    @include element.rule();
  }
  #{ $class }--content-on-top {
    position: relative;
    > * {
      background-color: white; // User woud need to specific per context needed or something
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      max-width: 100%;
      padding: 0.5em;
      margin: 0;
    }
  }

  // Output user's styles presets
  @each $name, $value in element.$rule-styles {
    #{ $class }--#{ $name } {
      @include element.rule-style($name);
    }
  }
  // Output user's margin presets
  @each $name, $value in element.$rule-margins {
    #{ $class }--margin-#{ $name } {
      @include element.rule-margin($name);
    }
  }

  // Meant to be user by itself without content
  $short-width: get("short-width");
  @if ($short-width) {
    #{ $class }--short {
      width: $short-width;
      max-width: 100%;
      border-bottom-width: get("short-border-width");
      display: inline-block;
    }
    @if get("short-modifiers") {
      @each $mod, $opts in get("short-modifiers") {
        #{ $class }--short {
          width: map.get($opts, "width");
          border-bottom-width: map.get($opts, "border-width");
        }
      }
    }
  }
}