////
///
/// Ratio / Aspect Ratio Mixins
/// ===========================================================================
///
/// Aspect ratio utility mixins for responsive media containers.
///
/// @group Mixins.Utilities
/// @author Scape Agency
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

@use "sass:map";
@use "../../variables/utilities" as *;

// ============================================================================
// Mixins
// ============================================================================

/// Base ratio container mixin
@mixin ratio {
    position: relative;
    width: 100%;

    &::before {
        display: block;
        padding-top: var(--ratio-y, 100%);
        content: "";
    }

    > * {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/// 1:1 aspect ratio (square)
@mixin ratio--1x1 {
    --ratio-y: #{map.get($aspect-ratios, "1x1")};
}

/// 4:3 aspect ratio
@mixin ratio--4x3 {
    --ratio-y: #{map.get($aspect-ratios, "4x3")};
}

/// 16:9 aspect ratio (widescreen)
@mixin ratio--16x9 {
    --ratio-y: #{map.get($aspect-ratios, "16x9")};
}

/// 21:9 aspect ratio (ultra-wide)
@mixin ratio--21x9 {
    --ratio-y: #{map.get($aspect-ratios, "21x9")};
}

/// Custom aspect ratio
/// @param {Number} $width - Width ratio
/// @param {Number} $height - Height ratio
@mixin ratio--custom($width, $height) {
    --ratio-y: calc(#{$height} / #{$width} * 100%);
}