////
/// @group basic-hero
/// Basic styling for a hero
////

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

@use "../breakpoint";
@use "../selector";
@use "../utils";
@use "../typography";
@use "../color";

// Used for function fallback
$-fallbacks: (
  "main-max-width" : (
    "function" : meta.get-function("get", false, "typography"),
    "property" : "max-width"
  ),
  "main-min-width" : (
    "function" : meta.get-function("get", false, "typography"),
    "property" : "max-width-small"
  ),
);

/// Module Settings
/// @type Map
/// @prop {CssValue} text-align [center] Alignment of text within hero.
/// @prop {Color} background-color ["color-hero-background"] Background color of the hero

$config: (
  "background-color" : "background-gray",
  "padding-top": 3rem,
  "padding-bottom" : 2rem,
  "gap" : (4rem 2rem),
  "main-max-width" : true,
  "main-min-width" : true,
  "media-max-width" : 20rem,
  "media-vertical-align" : center
) !default;

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

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

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

@mixin styles {
  $prefix: selector.class("basic-hero");

  #{ $prefix } {
    background-color: color.get(get("background-color")); 
  }
  #{ $prefix }__content {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: get("gap"); 
    padding-top: get("padding-top");
    padding-bottom: get("padding-bottom");
  }
  #{ $prefix }__content-main {
    $min-width: if(get("main-min-width"), get("main-min-width"), get("main-max-width"));
    // Using max/min-width so that we don't need to add selectors to change flex-basis
    // when centered. Using flex-basis: 0 to allow flexbox to decide the items width
    // allows it to expand/shrink within. min(100%... Never larger than parent
    min-width: min(100%, $min-width); 
    max-width: get("main-max-width");
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 0;
  }
  #{ $prefix }__content-media {
    display: flex;
    align-items: center;
    align-self: get("media-vertical-align");
    justify-content: center;
    flex: 0 0 auto; 
    width: min(100%, get("media-max-width"));
  }

  // Modifiers
  #{ $prefix }--center {
    #{ $prefix }__content {
      flex-direction: column;
      flex-wrap: nowrap;
      text-align: center;
      align-items: center;
    }
  }
}