@use "../../../dev" as *;
@use "../../../variables" as *;
// @use "../../../mixins" as *;
// @use "../soul_type" as *;

// ============================================================================
// Media | Image
// ============================================================================

// Note: Tag-level styles for img have been moved to src/scss/tags/_media.scss

///
/// Mixin for styling images to cover their container.
///
/// The image is positioned absolutely, taking up the full width and height
/// of its container. The background is centered and covers the entire
/// container.
///
@mixin image--cover {
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;

    //     width: 100%;
    // height: 100%;
    // object-fit: cover;
    // object-position: center;
    // display: block;
    // position: relative !important;
    // overflow: hidden !important;
    // background-position: center !important;
}

///
/// Mixin for creating a parallax effect on images.
///
/// The image is positioned relative with a fixed background attachment,
/// creating a parallax scrolling effect.
///
@mixin image--parallax {
    position: relative !important;
    background-size: cover !important;
    overflow: hidden;
    background-attachment: fixed !important;
    transition-duration: 0s;
    -moz-transition-duration: 0s;
    -webkit-transition-duration: 0s;
    -o-transition-duration: 0s;
}

///
/// Mixin for fixing the background of an image in place.
///
/// The image background is fixed, centered, and does not repeat. This is
/// useful for creating non-scrolling backgrounds.
///
@mixin image_fix--background {
    background-attachment: fixed !important;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover !important;
    overflow: hidden;
    position: relative;
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: ease-in;
}

@mixin vignette {
    box-shadow: 0 0 q(200) rgba(0, 0, 0, 0.9) inset;
}

@mixin profile_identicon {
    svg {
        width: q(128);
        height: q(128);
    }
}