////
/// @group button
/// Output core button styles and sizes
////

@use "sass:map";
// @use "sass:selector" as sassSelector;
@use "../typography";
@use "../selector";
@use "../utils";
@use "../button";

/// Module Settings
/// @type Map
/// @prop {Dimension} icon-margin [1em] List of other sizes (large by default), each size is a map of (width, font-size) 

$config: (
  "icon-margin" : 0.5em
) !default;

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

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

/// Output button component styles
/// @example scss
///  @include ulu.component-button-styles();
/// @example html {preview}
///  <a class="button" href="#">Button Default</a>

@mixin styles {
  @include utils.file-header('component', 'button');

  $prefix: selector.class("button");
  // $printContextual: get("contextual-classes");
  // $classContextual: "#{ selector.class("button-inside") } ;
  $icon-selector: "#{ $prefix }--icon";
  $printDescendant: "#{ $prefix }--icon";

  #{ $prefix } {
    @include button.default();
  }
  #{ $prefix }__icon {
    &:first-child {
      margin-right: get("icon-margin");
    }
    &:last-child {
      margin-left: get("icon-margin");
    }
  }
  
  @each $size, $values in button.$sizes {
    #{ $prefix }--#{$size} {
      @include button.size($size);
    }
  }

  @each $style, $values in button.$styles {
    #{ $prefix }--#{$style} {
      @include button.style($style);
    }
  }

  #{ $icon-selector } {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: none;
    border-radius: button.get("icon-border-radius");
    font-size: button.get("icon-font-size");
    width: button.get("icon-size");
    height: button.get("icon-size");
    padding: 0 !important;
  }

  @each $size, $values in button.$sizes {
    $icon-size: map.get($values, "icon-size");
    $icon-font-size: map.get($values, "icon-font-size");
    @if ($icon-size or $icon-font-size) {
      #{ $prefix }--#{$size}#{ $icon-selector } {
        width: $icon-size;
        height: $icon-size;
        font-size: $icon-font-size;
      }
    }
  }
}