////
/// @group badge
/// Outputs badge component stylesheet
////

@use "sass:meta";
@use "sass:map";
@use "../utils";
@use "../selector";
@use "../typography";
@use "../color";

// Used for function fallback
$-fallbacks: (
  "font-family" : (
    "function" : meta.get-function("get", false, "typography"),
    "property" : "font-family-sans"
  )
);

/// Module Settings
/// @type Map
/// @prop {Number} background-color [gray] Background color (if no image)
/// @prop {Number} border-radius [50%] Border radius of badge
/// @prop {Number} color [black] Type color
/// @prop {Number} font-size [1.3rem] Font size (basic ie. 1.3rem) for badge
/// @prop {Number} font-weight [bold] Font weight
/// @prop {Number} font-family [true] Specify font family, defaults to typography font-family-sans
/// @prop {List} sizes [Object] List of other sizes (large by default), each size is a map of (width, font-size) 
/// @prop {Number} width [10rem] Width of badge (default size)

$config: (
  "background-color":    gray,
  "border-radius":       50%,
  "color":               black,
  "font-size":           1.5rem,
  "font-weight":         bold,
  "font-family":         true,
  "width":               7rem,
  "sizes" : (
    "small" : (
      "font-size" : 1.2rem,
      "width" :  5rem
    ),
    "large" : (
      "font-size" : 2.75rem,
      "width" :  9rem
    )
  )
) !default;

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

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

/// Output badge component styles
/// @example scss
///  @include ulu.component-badge-styles();
/// @example html {preview}
///  <div class="badge">
///    <div class="badge__inner">
///      <img src="..." alt="...">
///    </div>
///  </div>
/// 
///  <div class="badge">
///    <div class="badge__inner">
///      <span>JS</span>
///    </div>
///  </div>

@mixin styles {
  $prefix: selector.class("badge");
  // Badge content can be text, image, icon, or background-image
  #{ $prefix } {
    display: block;
    width: get("width");
    max-width: 100%;
    flex: 0 0 get("width");
    font-size: get("font-size");
    font-weight: get("font-weight");
    font-family: get("font-family");
  }
  #{ $prefix }__inner {
    display: block;
    padding-bottom: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    text-align: center;
    border-radius: get("border-radius");
    transition: transform 100ms ease-in-out;
    // Incase this is used as a link or router-link
    &,
    &:hover,
    &:focus,
    &:visited {
      background-color: color.get(get("background-color"));
      color: color.get(get("color"));
    }
  }
  #{ $prefix }--clickable {
    &:hover,
    &:focus {
      #{ $prefix }__inner {
        transform: scale(1.2);
      }
    }
  }
  #{ $prefix }__inner > * {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #{ $prefix }__inner > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0 !important;
  }

  @each $name, $props in get("sizes") {
    #{ $prefix }--#{ $name } {
      width: map.get($props, "width");
      font-size: map.get($props, "font-size");
      flex-basis: map.get($props, "width");
    }
  }
}