////
///
/// Figure Classes
/// ===========================================================================
///
/// @group Classes.BodyMolecules.Content.Figure
/// @author Scape Agency
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

@use "../../../mixins/body_molecules/content/figure" as *;

// ============================================================================
// Figure Classes
// ============================================================================

// Apply the mixin to the figure element
figure {
    @include figure--base;
    overflow: hidden;

    &.figure--rounded {
        @include figure--rounded;
    }
}

/// Styles for images within a `<figure>`.
///
/// Ensures the image fits within its container and maintains its aspect ratio.
figure img {
    object-fit: contain;
    width: 100%;
}

// ============================================================================
// Aspect Ratio Classes
// ============================================================================

.figure_1x1 {
    @include figure--aspect-1x1;
}

.figure_3x2 {
    @include figure--aspect-3x2;
}

.figure_4x3 {
    @include figure--aspect-4x3;
}

.figure_3x4 {
    @include figure--aspect-3x4;
}

.figure_2x3 {
    @include figure--aspect-2x3;
}

.figure_16x9 {
    @include figure--aspect-16x9;
}

/// Ensures images within aspect ratio containers fill the container while maintaining their aspect ratio.
.figure_1x1 img,
.figure_3_2 img,
.figure_4x3 img,
.figure_3x4 img,
.figure_2x3 img,
.figure_16x9 img {
    @include figure--aspect-img;
}