////
/// @group fill-context
////
/// Setup images or videos to behave like background images (object-fit).

@use "data-grid";
@use "../breakpoint";
@use "../selector";

/// Output component stylesheet
/// - Use the parent selector '.fill-context' on the element that should be the 
///   frame for the child object (img,video).  
/// - Can be used within the grid with modifier (see in example below).
/// @example scss
///   @include ulu.component-fill-context-styles();
/// @example html {preview}
///   <div class="fill-context">
///     <img class="fill-context__object" src="background.jpg">
///   </div>
///  
///  
///   <div class="fill-context fill-context--auto">
///     <img src="background.jpg">
///   </div>
///  
///   <div data-grid-item="width: 6" class="fill-context fill-context--in-grid fill-context--contain">
///     <img src="background.jpg">
///   </div>

@mixin styles {
  $prefix: selector.class("fill-context");

  #{ $prefix } {
    position: relative;
  }
  #{ $prefix }__object,
  #{ $prefix }--auto img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #{ $prefix }--contain {
    &#{ $prefix }--auto img,
    #{ $prefix }__object {
      object-fit: contain;
    }
  }

  #{ $prefix }--in-grid {
    $breakpoint: data-grid.get-default-breakpoint();
    @include breakpoint.max($breakpoint) {
      #{ $prefix }__object,
      &#{ $prefix }--auto img {
        position: static;
        height: auto;
        object-fit: fill;
      }
    }
  }
}