@charset "UTF-8";

///
/// A mixin that creates a fluid container with specified aspect ratio that accommodates various content types within.
/// Default aspect ratio is 16 by 9.
///
/// @name aspect-ratio
///
/// @param {number} $width - The width of the aspect-ratio
/// @param {number} $height - The height of the aspect-ratio
/// @param {css selector} $selector - The css selector for the element filling the container target.
///
/// @group mixin
@mixin aspect-ratio($width: $su-aspect-width, $height: $su-aspect-height, $selector: "> *:first-child") {
  position: relative;

  &::before {
    display: block;
    content: '';
    width: 100%;
    padding-top: ($height / $width) * 100%;
  }

  > img,
  > video {
    object-fit: cover;
  }

  /// If a selector was passed in try to use it to set the contents.
  @if ($selector) {
    > * {
      position: relative;
      z-index: 5;
    }

    #{$selector} {
      position: absolute;
      z-index: 1;
      width: 100%;
      height: 100%;
      left: 0;
      bottom: 0;
    }
  }

}
