////
/// @group overlay-section
////

// NOTE: This is an updated version that uses floating UI

@use "sass:math";
@use "sass:map";
@use "../utils";
@use "../breakpoint";
@use "../color";
@use "../layout";

/// Module Settings
/// @type Map
/// @prop {Color} content-background-color [white] The background color of the content.
/// @prop {CssValue} content-border [1px solid rgb(227, 227, 227)] The border of the content
/// @prop {Dimension} content-padding [2.5rem] The padding of the content.
/// @prop {Dimension} content-width [34rem] The width of the content.
/// @prop {Dimension} min-height [75vh] the min-height of the section.
/// @prop {Dimension} padding [6rem] The padding of the container.
/// @prop {Map} breakpoints [Map] The breakpoints of the section.

$config: (
  "content-background-color" : white,
  "content-border" : 1px solid rgb(227, 227, 227),
  "content-padding" : 2.5rem,
  "content-width" : 34rem,
  "min-height" : 75vh,
  "padding" : 6rem,
  "breakpoints" : (
    "medium" : (
      "direction" : "down",
      "padding" : 4rem,
    ),
    "small" : (
      "direction" : "down",
      "padding" : 2rem,
      "content-padding" : 1.5rem
    )
  )
) !default;

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

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

/// Prints component styles
/// @example scss
///  @include ulu.component-overlay-section-styles();

@mixin styles {

  .overlay-section {
    position: relative;
    display: flex;
    min-height: get("min-height");
    align-items: center;
    justify-content: center;
    padding: get("padding");

    @each $breakpoint, $props in get("breakpoints") {
      $direction: map.get($props, "direction");
      @include breakpoint.from($breakpoint, $direction) {
        padding: map.get($props, "padding");
        min-height: map.get($props, "min-height");
      }
    }
  }
  .overlay-section__background {
    @include layout.absolute-fill();
    img, 
    video {
      object-fit: cover;
      height: 100%;
      width: 100%;
    }
  }
  .overlay-section__content {
    position: relative;
    z-index: 2;
    background-color: color.get(get("content-background-color"));
    border: get("content-border");
    flex: 0 1 get("content-width");
    padding: get("content-padding");
    @each $breakpoint, $props in get("breakpoints") {
      $direction: map.get($props, "direction");
      @include breakpoint.from($breakpoint, $direction) {
        padding: map.get($props, "content-padding");
      }
    }
  }
  .overlay-section--top {
    align-items: flex-start;
  }
  .overlay-section--bottom {
    align-items: flex-end;
  }
  .overlay-section--left {
    justify-content: flex-start;
  }
  .overlay-section--right {
    justify-content: flex-end;
  }
}