@charset 'utf-8';

/*  ========================================================================
    JUICE -> ELEMENTS -> MEDIA -> IMAGE
    ========================================================================  */

// Check if the elements with image should be imported
@if $import-elements and $import-element-image {
    img {
        display: block;
        max-width: 100%;

        // Modifiers: State hooks
        &.is-fullwidth {
            // Styles
            display: flex;
            max-width: auto;
            margin-right: 0;
            min-width: 100%;
        }

        // Check if the image alignment modifiers should be declared
        @if $image-alignment-modifiers {
            // Modifiers
            &.image--center {
                display: block;
                float: none;
                margin: 0 auto $image-element-spacing;
            }

            &.image--left {
                display: inline-block;
                float: left;
                margin-bottom: 0;
                margin-right: $image-element-spacing;
            }

            &.image--right {
                display: inline-block;
                float: right;
                margin-bottom: 0;
                margin-left: $image-element-spacing;
            }
        }

        // Check if the image round modifier should be declared
        @if $image-round-modifier {
            &.image--round {
                border-radius: 100%;
            }
        }
    }
}