@charset 'utf-8';

/*  ========================================================================
    JUICE -> ELEMENTS -> LAYOUT -> MEDIA OBJECT
    ========================================================================  */

// Check if the elements with media object should be imported
@if $import-elements and $import-element-media-object {
    .media-object {
        display: flex;
        font-size: $media-object-font-size;
        margin: 0;
        margin-bottom: $media-object-element-spacing;
        position: relative;

        // Check if the media object size modifiers should be declared
        @if $media-object-size-modifiers {
            // Cycle through all of the sizes
            @each $size in $sizes {
                // Modifiers: Sizes
                &.is-#{$size} {
                    font-size: map-get($media-object-font-size-sizes, $size);

                    // Check if the media object reverse modifier should be declared
                    @if $media-object-reverse-modifiers {
                        // Modifiers
                        &.media-object--reverse {
                            // Nested selectors
                            .media-object__badge {
                                // Styles
                                margin: 0;
                                margin-left: map-get($media-object-content-spacing-sizes, $size);
                            }
                        }
                    }

                    // Nested selectors
                    .media-object__badge {
                        margin: 0;
                        margin-right: map-get($media-object-content-spacing-sizes, $size);

                        // Nested selectors
                        img {
                            max-width: map-get($media-object-badge-image-width-sizes, $size);
                            min-width: map-get($media-object-badge-image-width-sizes, $size);
                            width: map-get($media-object-badge-image-width-sizes, $size);
                        }
                    }
                }

                // Check if the media object size modifiers with breakpoints should be declared
                @if $media-object-size-modifiers-with-breakpoints {
                    // Cycle through all of the breakpoints
                    @each $breakpoint-name, $breakpoint-value in $breakpoints {
                        // Breakpoint
                        @include breakpoint($breakpoint-name) {
                            // Modifiers: Size
                            &.is-#{$size}\@#{$breakpoint-name} {
                                font-size: map-get($media-object-font-size-sizes, $size);

                                // Check if the media object reverse modifier should be declared
                                @if $media-object-reverse-modifiers {
                                    // Modifiers
                                    &.media-object--reverse {
                                        // Nested selectors
                                        .media-object__badge {
                                            // Styles
                                            margin: 0;
                                            margin-left: map-get($media-object-content-spacing-sizes, $size);
                                        }
                                    }
                                }

                                // Nested selectors
                                .media-object__badge {
                                    margin: 0;
                                    margin-right: map-get($media-object-content-spacing-sizes, $size);

                                    // Nested selectors
                                    img {
                                        max-width: map-get($media-object-badge-image-width-sizes, $size);
                                        min-width: map-get($media-object-badge-image-width-sizes, $size);
                                        width: map-get($media-object-badge-image-width-sizes, $size);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        // Check if the media object reverse modifier should be declared
        @if $media-object-reverse-modifiers {
            // Modifiers
            &.media-object--reverse {
                // Styles
                flex-direction: row-reverse;

                // Nested selectors
                .media-object__badge {
                    // Styles
                    margin: 0;
                    margin-left: $media-object-content-spacing;
                }
            }
        }

        // Check if the media object seamless modifier should be declared
        @if $media-object-seamless-modifiers {
            // Modifiers
            &.media-object--seamless {
                // Nested selectors
                .media-object__badge {
                    // Styles
                    margin-right: 0;
                }
            }
        }

        // Nested selectors
        .media-object__badge {
            // Styles
            margin: 0;
            margin-right: $media-object-content-spacing;
            flex: 0 0 auto;

            // Nested selectors
            img {
                // Styles
                display: block;
                max-width: $media-object-badge-image-width;
                min-width: $media-object-badge-image-width;
                width: $media-object-badge-image-width;
            }
        }

        .media-object__content {
            // Styles
            flex-grow: 1;
        }
    }
}