/*------------------------------------*\
    #MEDIA
\*------------------------------------*/

/**
 * Place any image- and text-like content side-by-side, as per:
 * stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
 */

// Predefine the variables below in order to alter and enable specific features.
$inuit-media-namespace:             $inuit-namespace !default;

$inuit-media-gutter:                $inuit-base-spacing-unit !default;
$inuit-media-gutter--small:         halve($inuit-media-gutter) !default;
$inuit-media-gutter--large:         double($inuit-media-gutter) !default;

$inuit-enable-media--small:         false !default;
$inuit-enable-media--large:         false !default;
$inuit-enable-media--rev:           false !default;
$inuit-enable-media--flush:         false !default;
$inuit-enable-media--responsive:    false !default;
$inuit-media-collapse-at:           720px !default;





.#{$inuit-media-namespace}media,
%#{$inuit-media-namespace}media {
    @extend %clearfix;
    display: block;
}

    .#{$inuit-media-namespace}media__img,
    %#{$inuit-media-namespace}media__img {
        float: left;
        margin-right: $inuit-media-gutter;

        > img {
            display: block;
        }

    }

    .#{$inuit-media-namespace}media__body,
    %#{$inuit-media-namespace}media__body {
        overflow: hidden;
        display: block;

        &,
        > :last-child {
            margin-bottom: 0;
        }

    }





@if ($inuit-enable-media--small == true) {

    /**
     * Small media objects.
     */

    .#{$inuit-media-namespace}media--small,
    %#{$inuit-media-namespace}media--small {

        > .#{$inuit-media-namespace}media__img,
        > %#{$inuit-media-namespace}media__img {
            margin-right: $inuit-media-gutter--small;
        }

        @if ($inuit-enable-media--rev == true) {

            /**
             * Small reversed media objects.
             */

            &.#{$inuit-media-namespace}media--rev,
            &%#{$inuit-media-namespace}media--rev {

                > .#{$inuit-media-namespace}media__img,
                > %#{$inuit-media-namespace}media__img {
                    margin-right: 0;
                    margin-left:  $inuit-media-gutter--small;
                }

            }

        }

    }

}

@if ($inuit-enable-media--large == true) {

    /**
     * Large media objects.
     */

    .#{$inuit-media-namespace}media--large,
    %#{$inuit-media-namespace}media--large {

        > .#{$inuit-media-namespace}media__img,
        > %#{$inuit-media-namespace}media__img {
            margin-right: $inuit-media-gutter--large;
        }

        @if ($inuit-enable-media--rev == true) {

            /**
             * Large reversed media objects.
             */

            &.#{$inuit-media-namespace}media--rev,
            &%#{$inuit-media-namespace}media--rev {

                > .media__img,
                > %media__img {
                    margin-right: 0;
                    margin-left:  $inuit-media-gutter--large;
                }

            }

        }

    }

}





@if ($inuit-enable-media--rev == true) {

    /**
     * Reversed image location (right instead of left). Extends `.media`.
     */

    .#{$inuit-media-namespace}media--rev,
    %#{$inuit-media-namespace}media--rev {

        > .#{$inuit-media-namespace}media__img,
        > %#{$inuit-media-namespace}media__img {
            float: right;
            margin-right: 0;
            margin-left: $inuit-media-gutter;
        }

    }

}





@if ($inuit-enable-media--flush == true) {

    /**
     * Flush media objects have no space between the image- and text-content.
     */

    .#{$inuit-media-namespace}media--flush,
    %#{$inuit-media-namespace}media--flush {

        > .#{$inuit-media-namespace}media__img,
        > %#{$inuit-media-namespace}media__img {
            margin-right: 0;
            margin-left:  0;
        }

    }

}





@if ($inuit-enable-media--responsive == true) {

    /**
     * Responsive media objects.
     *
     * There is a very pragmatic, simple implementation of a responsive media
     * object, which simply places the text-content beneath the image-content.
     *
     * We use a `max-width` media query because:
     *
     * a) it is the least verbose method in terms of amount of code required.
     * b) the media object’s default state is image-next-to-text, so its stacked
     *    state is the exception, rather than the rule.
     */

    @media screen and (max-width: $inuit-media-collapse-at) {

        .#{$inuit-media-namespace}media--responsive,
        %#{$inuit-media-namespace}media--responsive {

            /**
             * Rework the spacings on regular media objects.
             */
            > .#{$inuit-media-namespace}media__img,
            > %#{$inuit-media-namespace}media__img {
                float: none;
                margin-right: 0;
                margin-bottom: $inuit-media-gutter;
                margin-left:  0;
            }

            @if ($inuit-enable-media--small == true) {

                /**
                 * Small responsive media objects.
                 *
                 * Take a little more heavy-handed approach to reworking
                 * spacings on media objects that are also small media objects
                 * in their regular state.
                 */

                &.#{$inuit-media-namespace}media--small,
                &%#{$inuit-media-namespace}media--small {

                    > .#{$inuit-media-namespace}media__img,
                    > %#{$inuit-media-namespace}media__img {
                        margin-right: 0;
                        margin-left:  0;
                    }

                }

            }

            @if ($inuit-enable-media--large == true) {

                /**
                 * Large responsive media objects.
                 *
                 * Take a little more heavy-handed approach to reworking
                 * spacings on media objects that are also large media objects
                 * in their regular state.
                 */

                &.#{$inuit-media-namespace}media--large,
                &%#{$inuit-media-namespace}media--large {

                    > .#{$inuit-media-namespace}media__img,
                    > %#{$inuit-media-namespace}media__img {
                        margin-right: 0;
                        margin-left:  0;
                    }

                }

            }

        }

    }

}