////
/// @group vignette
/// Create a vignette effect around image/video/etc
////

@use 'sass:color';
@use "sass:map";
@use "../utils";
@use "../selector";
@use "../layout";

/// Module Settings
/// @type Map
/// @prop {Color} background-color [rgb(0,0,0)] Color used for the fade-in of the vignette. Must be actual color not color module palette name
/// @prop {CssValue} image-filter [saturate(85%)] Filter value placed over image.

$config: (
  "background-color" : rgb(0,0,0),
  "image-filter" : saturate(85%)
);

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

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

/// Output component stylesheet
/// @example scss
///  @include ulu.component-vignette-styles();

@mixin styles {
  $prefix: selector.class("vignette");

  #{ $prefix } {
    position: relative;
    &::after {
      content: "";
      display: block;
      @include layout.absolute-fill();
      background: linear-gradient(0deg,color.change(get("background-color"), $alpha: 0.8),color.change(get("background-color"), $alpha: 0) 45%);
      pointer-events: none;
    }
    @if get("image-filter") {
      img {
        filter: get("image-filter");
      }
    }
  }
}