////
/// (c) hidoo | MIT License
/// @group box features
////

@use "sass:math";

/// apply aspect ratio settings
/// @param {Number} $width [16] - width
/// @param {Number} $height [9] - height
///
/// @example scss - scss inputs
///  .selector {
///    @include mixin.box-apply-aspect-ratio($width: 16, $height: 9);
///  }
///
/// @example css - css outputs
///  .selector::before {
///    content: "";
///    display: block;
///    width: 100%;
///    height: 0;
///    padding-top: 56.25%;
///  }
///
@mixin apply-aspect-ratio($width: 16, $height: 9) {
  $ratio: math.div($height, $width) * 100;

  &::before {
    content: "";

    display: block;

    width: 100%;
    height: 0;
    padding-top: $ratio * 1%;
  }
}