@import "settings";
@import "foundation-sites/scss/components/media-object";

////
/// @group media-object
///

/// Flag for if we should include media object default classes
/// @type Bool
$bonsai-include-media: $bonsai-include-components !default;

/// Bottom margin of a media object.
/// @type Number
$bonsai-mediaobject-margin-bottom: $bonsai-global-margin !default;

/// Left and right padding on sections within a media object.
/// @type Number
$bonsai-mediaobject-section-padding: $bonsai-global-padding !default;

/* --- Foundation configuration --- */
$mediaobject-section-padding: $bonsai-mediaobject-section-padding;
$mediaobject-margin-bottom: $bonsai-mediaobject-margin-bottom;

/// The container object that contains the sections
@mixin bonsai-media-object-container {
  @include media-object-container;

  img {
    max-width: none;
  }
}

/// The child sections in a media object container
@mixin bonsai-media-section {
  @include media-object-section;
}

/// Used to correctly align the main content section to the media element
@mixin bonsai-media-main-section {
  flex: 1 1 0px;
}

/// Used to generate the default media object Bonsai classes
@mixin bonsai-media-object {
  @if $bonsai-include-media {
    .media-object {
      @include bonsai-media-object-container;
    }

    .media-object-section {
      @include bonsai-media-section;

      &.main-section {
        @include bonsai-media-main-section;
      }
    }
  }
}