// ============================================================================
// Molecule | Figure
// ============================================================================

@use "sass:map";
@use "sass:list";

@use "../../../dev" as *;
@use "../../../variables" as *;
@use "../../soul_type" as *;
@use "../../body_atoms" as *;
@use "../../soul_object" as *;

// ============================================================================
// Media | Figures
// ============================================================================

// Define variables for consistent styling
$figure-border-color: var(--color_line_primary);
$figure-padding: q(8);
$figcaption-margin-top: q(16);
$figcaption-text-align: left;
$figcaption-font-style: italic;

// Mixin for figure styling
@mixin figure--base {
    position: relative;
    display: inline-block;
    box-sizing: border-box;

    &.border {
        border: q(1) solid $figure-border-color;
    }

    img {
        display: block;
        object-fit: cover;
        width: 100%;
        height: 100%;

        &.height_auto {
            height: auto !important;
        }
    }

    .figcaption--title {
        @include font--size_03;
        @include font--weight_700;
        font-style: normal !important;
        margin-top: $figcaption-margin-top;
        padding: $figure-padding $figure-padding calc($figure-padding/4)
            $figure-padding;
        text-align: $figcaption-text-align;
        font-style: $figcaption-font-style;
    }

    figcaption {
        @include font--size_03;
        @include font--weight_400;
        font-style: normal !important;
        padding: calc($figure-padding/4) $figure-padding $figure-padding
            $figure-padding;
        text-align: $figcaption-text-align;
        font-style: $figcaption-font-style;
    }
}

@mixin figure--rounded {
    @include object--corner--rounded;
}

// Example for a themed figure, reusing the mixin with different variables
// $dark-theme-figure-border-color: #666;
// $dark-theme-figcaption-font-size: 0.95em;

// .dark-theme-figure {
//     @include figure_style;

//     border-color: $dark-theme-figure-border-color;

//     figcaption {
//         font-size: $dark-theme-figcaption-font-size;
//     }
// }

/// Styles for the `<figure>` element.
///
/// Ensures the figure is positioned relative and that its contents are aligned.
// figure {
//     position: relative;
//     // Ensures the caption's text aligns with the image.
//     display: inline-block;
// }

/// Styles for the `<figcaption>` element within a `<figure>`.
///
/// Includes font styling to make the caption stand out.
// figure figcaption {
// color: {{ css_color_01 }};
// font-weight: 700;
//   @include font-size($figure-caption-font-size);
//   color: $figure-caption-color;
// }

/// Utility class for additional text styling within figures.
// .figure_text {
//     font-size: calc(q(24));
// }

/// Utility class for styling dots or other small elements within figures.
// .figure_dot {
// r: calc(q(8));
// }

/// Aspect Ratio Utilities
// ----------------------------------------------------------------------------
/// Utility classes to maintain various aspect ratios for images within figures.
///
/// These classes ensure that images maintain their aspect ratio, regardless of screen size.

/// Base aspect ratio mixin
/// @group Figure
@mixin figure--aspect-base {
    width: 100%;
    position: relative;
    overflow: hidden; // Ensures content doesn't overflow the figure
}

/// 1:1 aspect ratio mixin
/// @group Figure
@mixin figure--aspect-1x1 {
    @include figure--aspect-base;
    padding-bottom: 100%; // Maintains a 1:1 aspect ratio
}

/// 3:2 aspect ratio mixin
/// @group Figure
@mixin figure--aspect-3x2 {
    @include figure--aspect-base;
    padding-bottom: 66.67%; // Maintains a 3:2 aspect ratio
}

/// 4:3 aspect ratio mixin
/// @group Figure
@mixin figure--aspect-4x3 {
    @include figure--aspect-base;
    padding-bottom: 75%; // Maintains a 4:3 aspect ratio
}

/// 3:4 aspect ratio mixin
/// @group Figure
@mixin figure--aspect-3x4 {
    @include figure--aspect-base;
    padding-bottom: 133.33%; // Maintains a 3:4 aspect ratio
}

/// 2:3 aspect ratio mixin
/// @group Figure
@mixin figure--aspect-2x3 {
    @include figure--aspect-base;
    padding-bottom: 150%; // Maintains a 2:3 aspect ratio
}

/// 16:9 aspect ratio mixin
/// @group Figure
@mixin figure--aspect-16x9 {
    @include figure--aspect-base;
    padding-bottom: 56.25%; // Maintains a 16:9 aspect ratio
}

/// Aspect ratio image mixin
/// @group Figure
@mixin figure--aspect-img {
    min-width: 100%;
    min-height: 100%;
    object-fit: cover; // Ensures the image covers the entire container
    position: absolute;
}

// Basic SCSS for Styling Figures
// ----------------------------------------------------------------------------
// This basic example styles the <figure> element with a border, padding, and
// margin for spacing. The <figcaption> is styled for typography and alignment.

// figure {
//     border: q(1) solid #ddd; // Light grey border
//     padding: q(10); // Padding inside the figure
//     margin: q(20) auto; // Center the figure and add margin
//     max-width: 80%; // Max width, for responsiveness
//     box-sizing: border-box; // Include padding and border in the element's total width and height

//     // Style for the image inside the figure (if any)
//     img {
//         display: block; // Remove inline spacing
//         width: 100%; // Make the image responsive
//         height: auto; // Maintain aspect ratio
//     }

//     // Style for the figcaption
//     figcaption {
//         margin-top: q(10); // Space between the image and caption
//         text-align: center; // Center-align the caption text
//         font-style: italic; // Italicize the caption
//         font-size: 0.9em; // Slightly smaller font size for the caption
//     }
// }