////
/// @group tagged
/// Provides styles to tags that should appear as superscripts of their related content. Custom properties --ulu-tagged-y, --ulu-tagged-x, and --ulu-tagged-transform can be adjusted if needed (inline style, in a specific styling for something, etc)
////

@use "sass:map";

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

/// Module Settings
/// @type Map
/// @prop {Dimension} position-x [-0.75em] Horizontal absolute position of the tag.
/// @prop {Dimension} position-y [-0.75em] Vertical absolute position of the tag.
/// @prop {CssValue} icon-opacity [null] Adds a transform styling to the tag.

$config: (
  "position-x": 0,
  "position-y": 0,
  "transform":  translate(50%, -50%)
) !default;

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

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

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

@mixin styles {

  $prefix: selector.class("tagged");

  #{ $prefix } {
    position: relative;
  }
  #{ $prefix }__tag {
    position: absolute;
    top: var(--ulu-tagged-y, get("position-y"));
    right: var(--ulu-tagged-x, get("position-x"));
    transform: var(--ulu-tagged-transform, get("transform"));
    margin: 0; // So it doesn't interfere if present
  }
}