@use "sass:math";
@use "variables" as _variables;

// --------------------------------------------------------------------------
//  Mixin - ratio
// --------------------------------------------------------------------------

@mixin ratio($ratio: 1 1, $selector: "> :first-child") {
   $padding: percentage(math.div(nth($ratio, 2), nth($ratio, 1)));
   $selector: unquote($selector);
   position: relative;

   padding-bottom: $padding;

   #{$selector} {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
   }
}

// --------------------------------------------------------------------------
//  Classes
// --------------------------------------------------------------------------

@if _variables.$s-ratios {
   @if type-of(_variables.$s-ratios) == "map" {
      @each $class, $value in _variables.$s-ratios {
         .#{$class} {
            @include ratio($value);
         }
      }
   } @else {
      @error "Invalid format for $s-ratios. Map required.";
   }
}