////
/// @group ratio-box
////
/// Uses aspect-ratio to keep ratio. Defaults to 4/3 (standard). Used for responsive iframe or images (object-fit), etc.

@use "sass:map";
@use "sass:math";
@use "sass:meta";
@use "sass:list";
@use "../utils";
@use "../layout";

/// Module Settings
/// @type Map
/// @prop {String|Number} size ["4/3"] Default aspect ratio (can be string like "16/9" or legacy percentage value)
/// @prop {Map} sizes [Map] Other ratios to add (apply with modifier class)

$config: (
  "size" : list.slash(4, 3),
  "sizes" : (
    "16x9" : list.slash(16, 9),
    "9x16" : list.slash(9, 16),
    "3x4" : list.slash(3, 4)
  )
) !default;

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

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

/// Prints component styles
/// @example scss
///  @include ulu.component-ratio-box-styles();

@mixin styles {
  .ratio-box {
    position: relative;
    aspect-ratio: utils.normalize-aspect-ratio(get("size"));
  }
  .ratio-box__content {
    @include layout.absolute-fill(true);
  }
  @each $name, $size in get("sizes") {
    .ratio-box--#{ $name } {
      aspect-ratio: utils.normalize-aspect-ratio($size);
    }
  }
}