@charset "UTF-8";

///
/// Centers a single cellin a container based on max width in breakpoints.
///
/// @name centered-column
///
/// @param {map} $grid - A sass map where the key is the shortcode of the breakpoint and the value is the full media query.
/// @param {map} $screens - A sass map of screen size breakpoint width values
/// @param {map} $margin - A sass map of screen size breakpoint screen edge margin sizes
///
/// @group mixin
@mixin centered-column($grid: $su-grid-media, $screens: $su-grid-screens, $margin: $su-screen-margins) {
  @include margin(0 auto);
  @each $code, $breakpoint in $grid {
    $spacing: map-get($margin, $code);

    @media #{$breakpoint} {
      @if breakpoint-max($code, $grid) == null {
        $max-width: map-get($screens, $code);
        max-width: $max-width;
        width: calc(100% - #{$spacing * 2});
      }
      @else {
        max-width: calc(100% - #{$spacing * 2});
        width: calc(100% - #{$spacing * 2});
      }
    }
  }
}
