/*------------------------------------*\
    # SPACING
\*------------------------------------*/

/**
 * Spacing (margin and padding) utility classes. These can be used to adjust layouts of components contructed
 * entirely of other abstractions
 *
    <h1 class="gel-cannon-bold gs-u-mb+">My Title</h1>
    <p class="gel-pica gs-u-mb gs-u-mb+@m">Some content</p>
 *
 * Applying spacing should not and does not have to be done exclusively with the classes, apply a bit of
 * common sense thinking as to when and where you use these.
 *
 * These classes use the following naming structure:

    .gs-u-(margin/padding)(spacing type)(spacing size)(optional breakpoint) { ... }

 *
 * Available spacing types:
 *
 * mt -> margin-top
 * mr -> margin-right (margin-left if $rtl is true)
 * mb -> margin-bottom
 * ml -> margin-left (margin-right if $rtl is true)
 * mv -> margin-top & margin-bottom
 * mh -> margin-right & margin-left (flipped if $rtl is true)
 * pt -> padding-top
 * pr -> padding-right (padding-left if $rtl is true)
 * pb -> padding-bottom
 * pl -> padding-left (padding-right if $rtl is true)
 * pv -> padding-top & padding-bottom
 * ph -> padding-right & padding-left (flipped if $rtl is true)
 *
 * Available gel spacing unit sizes:
 *
 * 0       - 0px
 * `--`    - 2px
 * `-`     - 4px
 * Default - 8px
 * `+`     - 16px
 * `++`    - 32px
 *
 * Available gel alt spacing unit sizes:
 *
 * 'alt'   - 12px
 * 'alt+'  - 24px
 *
 * Optional breakpoint suffix:
 *
 * @xs - GEL Extra Small Breakpoint (240px)
 * @s - GEL Small Breakpoint (400px)
 * @m - GEL Medium Breakpoint (600px)
 * @l - GEL Large Breakpoint (900px)
 * @xl - GEL Extra Large Breakpoint (1008px)
 * @xxl - GEL Extra Extra Large Breakpoint (1280px)
 *
 */


// Which breakpoints do we want spacing classes generated for?
//
// @type List
//
$gs-spacing-breakpoints: $gel-grid-breakpoints !default;
$gs-spacing-breakpoints--1280: $gel-grid-breakpoints--1280 !default;


// Output the spacing classes, adding a breakpoint namespace if required
//
// @param {String}  $breakpoint - breakpoint namespace you want to apply
//
// @access          private
//
// @author          Shaun Bent
//
@mixin _output-spacing-classes($breakpoint: null) {
    $breakpoint-suffix: '';

    @if $breakpoint != null {
        $breakpoint-suffix: \@#{$breakpoint};
    }

    /**
     * Margin spacing classes (gel spacing unit)
     */
    .gs-u-m#{$breakpoint-suffix}       { margin:           $gel-spacing-unit !important; }
    .gs-u-mt#{$breakpoint-suffix}      { margin-top:       $gel-spacing-unit !important; }
    .gs-u-mr#{$breakpoint-suffix}      { #{$margin-right}: $gel-spacing-unit !important; }
    .gs-u-mb#{$breakpoint-suffix}      { margin-bottom:    $gel-spacing-unit !important; }
    .gs-u-ml#{$breakpoint-suffix}      { #{$margin-left}:  $gel-spacing-unit !important; }
    .gs-u-mh#{$breakpoint-suffix}      { #{$margin-right}: $gel-spacing-unit !important; #{$margin-left}:  $gel-spacing-unit !important; }
    .gs-u-mv#{$breakpoint-suffix}      { margin-top:       $gel-spacing-unit !important; margin-bottom:    $gel-spacing-unit !important; }

    /**
     * Tiny margin spacing classes (gel spacing unit)
     */
    .gs-u-m--#{$breakpoint-suffix}     { margin:           quarter($gel-spacing-unit) !important; }
    .gs-u-mt--#{$breakpoint-suffix}    { margin-top:       quarter($gel-spacing-unit) !important; }
    .gs-u-mr--#{$breakpoint-suffix}    { #{$margin-right}: quarter($gel-spacing-unit) !important; }
    .gs-u-mb--#{$breakpoint-suffix}    { margin-bottom:    quarter($gel-spacing-unit) !important; }
    .gs-u-ml--#{$breakpoint-suffix}    { #{$margin-left}:  quarter($gel-spacing-unit) !important; }
    .gs-u-mh--#{$breakpoint-suffix}    { #{$margin-right}: quarter($gel-spacing-unit) !important; #{$margin-left}:  quarter($gel-spacing-unit) !important; }
    .gs-u-mv--#{$breakpoint-suffix}    { margin-top:       quarter($gel-spacing-unit) !important; margin-bottom:    quarter($gel-spacing-unit) !important; }

    /**
     * Small margin spacing classes (gel spacing unit)
     */
    .gs-u-m-#{$breakpoint-suffix}      { margin:           halve($gel-spacing-unit) !important; }
    .gs-u-mt-#{$breakpoint-suffix}     { margin-top:       halve($gel-spacing-unit) !important; }
    .gs-u-mr-#{$breakpoint-suffix}     { #{$margin-right}: halve($gel-spacing-unit) !important; }
    .gs-u-mb-#{$breakpoint-suffix}     { margin-bottom:    halve($gel-spacing-unit) !important; }
    .gs-u-ml-#{$breakpoint-suffix}     { #{$margin-left}:  halve($gel-spacing-unit) !important; }
    .gs-u-mh-#{$breakpoint-suffix}     { #{$margin-right}: halve($gel-spacing-unit) !important; #{$margin-left}:  halve($gel-spacing-unit) !important; }
    .gs-u-mv-#{$breakpoint-suffix}     { margin-top:       halve($gel-spacing-unit) !important; margin-bottom:    halve($gel-spacing-unit) !important; }

    /**
     * Large margin spacing classes (gel spacing unit)
     */
    .gs-u-m\+#{$breakpoint-suffix}     { margin:           double($gel-spacing-unit) !important; }
    .gs-u-mt\+#{$breakpoint-suffix}    { margin-top:       double($gel-spacing-unit) !important; }
    .gs-u-mr\+#{$breakpoint-suffix}    { #{$margin-right}: double($gel-spacing-unit) !important; }
    .gs-u-mb\+#{$breakpoint-suffix}    { margin-bottom:    double($gel-spacing-unit) !important; }
    .gs-u-ml\+#{$breakpoint-suffix}    { #{$margin-left}:  double($gel-spacing-unit) !important; }
    .gs-u-mh\+#{$breakpoint-suffix}    { #{$margin-right}: double($gel-spacing-unit) !important; #{$margin-left}:  double($gel-spacing-unit) !important; }
    .gs-u-mv\+#{$breakpoint-suffix}    { margin-top:       double($gel-spacing-unit) !important; margin-bottom:    double($gel-spacing-unit) !important; }

    /**
     * Huge margin spacing classes (gel spacing unit)
     */
    .gs-u-m\+\+#{$breakpoint-suffix}   { margin:           quadruple($gel-spacing-unit) !important; }
    .gs-u-mt\+\+#{$breakpoint-suffix}  { margin-top:       quadruple($gel-spacing-unit) !important; }
    .gs-u-mr\+\+#{$breakpoint-suffix}  { #{$margin-right}: quadruple($gel-spacing-unit) !important; }
    .gs-u-mb\+\+#{$breakpoint-suffix}  { margin-bottom:    quadruple($gel-spacing-unit) !important; }
    .gs-u-ml\+\+#{$breakpoint-suffix}  { #{$margin-left}:  quadruple($gel-spacing-unit) !important; }
    .gs-u-mh\+\+#{$breakpoint-suffix}  { #{$margin-right}: quadruple($gel-spacing-unit) !important; #{$margin-left}:  quadruple($gel-spacing-unit) !important; }
    .gs-u-mv\+\+#{$breakpoint-suffix}  { margin-top:       quadruple($gel-spacing-unit) !important; margin-bottom:    quadruple($gel-spacing-unit) !important; }

    /**
     * Alt margin spacing classes
     */
    .gs-u-m-alt#{$breakpoint-suffix}       { margin:           $gel-alt-spacing-unit !important; }
    .gs-u-mt-alt#{$breakpoint-suffix}      { margin-top:       $gel-alt-spacing-unit !important; }
    .gs-u-mr-alt#{$breakpoint-suffix}      { #{$margin-right}: $gel-alt-spacing-unit !important; }
    .gs-u-mb-alt#{$breakpoint-suffix}      { margin-bottom:    $gel-alt-spacing-unit !important; }
    .gs-u-ml-alt#{$breakpoint-suffix}      { #{$margin-left}:  $gel-alt-spacing-unit !important; }
    .gs-u-mh-alt#{$breakpoint-suffix}      { #{$margin-right}: $gel-alt-spacing-unit !important; #{$margin-left}:  $gel-alt-spacing-unit !important; }
    .gs-u-mv-alt#{$breakpoint-suffix}      { margin-top:       $gel-alt-spacing-unit !important; margin-bottom:    $gel-alt-spacing-unit !important; }

    /**
     * Alt double margin spacing classes
     */
    .gs-u-m-alt\+#{$breakpoint-suffix}       { margin:           double($gel-alt-spacing-unit) !important; }
    .gs-u-mt-alt\+#{$breakpoint-suffix}      { margin-top:       double($gel-alt-spacing-unit) !important; }
    .gs-u-mr-alt\+#{$breakpoint-suffix}      { #{$margin-right}: double($gel-alt-spacing-unit) !important; }
    .gs-u-mb-alt\+#{$breakpoint-suffix}      { margin-bottom:    double($gel-alt-spacing-unit) !important; }
    .gs-u-ml-alt\+#{$breakpoint-suffix}      { #{$margin-left}:  double($gel-alt-spacing-unit) !important; }
    .gs-u-mh-alt\+#{$breakpoint-suffix}      { #{$margin-right}: double($gel-alt-spacing-unit) !important; #{$margin-left}:  double($gel-alt-spacing-unit) !important; }
    .gs-u-mv-alt\+#{$breakpoint-suffix}      { margin-top:       double($gel-alt-spacing-unit) !important; margin-bottom:    double($gel-alt-spacing-unit) !important; }

    /**
     * Zero margin spacing classes
     */
    .gs-u-m0#{$breakpoint-suffix}      { margin:           0 !important; }
    .gs-u-mt0#{$breakpoint-suffix}     { margin-top:       0 !important; }
    .gs-u-mr0#{$breakpoint-suffix}     { #{$margin-right}: 0 !important; }
    .gs-u-mb0#{$breakpoint-suffix}     { margin-bottom:    0 !important; }
    .gs-u-ml0#{$breakpoint-suffix}     { #{$margin-left}:  0 !important; }
    .gs-u-mh0#{$breakpoint-suffix}     { #{$margin-right}: 0 !important; #{$margin-left}:  0 !important; }
    .gs-u-mv0#{$breakpoint-suffix}     { margin-top:       0 !important; margin-bottom:    0 !important; }

    /**
     * Padding spacing classes (gel spacing unit)
     */
    .gs-u-p#{$breakpoint-suffix}       { padding:           $gel-spacing-unit !important; }
    .gs-u-pt#{$breakpoint-suffix}      { padding-top:       $gel-spacing-unit !important; }
    .gs-u-pr#{$breakpoint-suffix}      { #{$padding-right}: $gel-spacing-unit !important; }
    .gs-u-pb#{$breakpoint-suffix}      { padding-bottom:    $gel-spacing-unit !important; }
    .gs-u-pl#{$breakpoint-suffix}      { #{$padding-left}:  $gel-spacing-unit !important; }
    .gs-u-ph#{$breakpoint-suffix}      { #{$padding-right}: $gel-spacing-unit !important; #{$padding-left}:  $gel-spacing-unit !important; }
    .gs-u-pv#{$breakpoint-suffix}      { padding-top:       $gel-spacing-unit !important; padding-bottom:    $gel-spacing-unit !important; }

    /**
     * Tiny padding spacing classes (gel spacing unit)
     */
    .gs-u-p--#{$breakpoint-suffix}     { padding:           quarter($gel-spacing-unit) !important; }
    .gs-u-pt--#{$breakpoint-suffix}    { padding-top:       quarter($gel-spacing-unit) !important; }
    .gs-u-pr--#{$breakpoint-suffix}    { #{$padding-right}: quarter($gel-spacing-unit) !important; }
    .gs-u-pb--#{$breakpoint-suffix}    { padding-bottom:    quarter($gel-spacing-unit) !important; }
    .gs-u-pl--#{$breakpoint-suffix}    { #{$padding-left}:  quarter($gel-spacing-unit) !important; }
    .gs-u-ph--#{$breakpoint-suffix}    { #{$padding-right}: quarter($gel-spacing-unit) !important; #{$padding-left}:  quarter($gel-spacing-unit) !important; }
    .gs-u-pv--#{$breakpoint-suffix}    { padding-top:       quarter($gel-spacing-unit) !important; padding-bottom:    quarter($gel-spacing-unit) !important; }

    /**
     * Small padding spacing classes (gel spacing unit)
     */
    .gs-u-p-#{$breakpoint-suffix}      { padding:           halve($gel-spacing-unit) !important; }
    .gs-u-pt-#{$breakpoint-suffix}     { padding-top:       halve($gel-spacing-unit) !important; }
    .gs-u-pr-#{$breakpoint-suffix}     { #{$padding-right}: halve($gel-spacing-unit) !important; }
    .gs-u-pb-#{$breakpoint-suffix}     { padding-bottom:    halve($gel-spacing-unit) !important; }
    .gs-u-pl-#{$breakpoint-suffix}     { #{$padding-left}:  halve($gel-spacing-unit) !important; }
    .gs-u-ph-#{$breakpoint-suffix}     { #{$padding-right}: halve($gel-spacing-unit) !important; #{$padding-left}:  halve($gel-spacing-unit) !important; }
    .gs-u-pv-#{$breakpoint-suffix}     { padding-top:       halve($gel-spacing-unit) !important; padding-bottom:    halve($gel-spacing-unit) !important; }

    /**
     * Large padding spacing classes (gel spacing unit)
     */
    .gs-u-p\+#{$breakpoint-suffix}     { padding:           double($gel-spacing-unit) !important; }
    .gs-u-pt\+#{$breakpoint-suffix}    { padding-top:       double($gel-spacing-unit) !important; }
    .gs-u-pr\+#{$breakpoint-suffix}    { #{$padding-right}: double($gel-spacing-unit) !important; }
    .gs-u-pb\+#{$breakpoint-suffix}    { padding-bottom:    double($gel-spacing-unit) !important; }
    .gs-u-pl\+#{$breakpoint-suffix}    { #{$padding-left}:  double($gel-spacing-unit) !important; }
    .gs-u-ph\+#{$breakpoint-suffix}    { #{$padding-right}: double($gel-spacing-unit) !important; #{$padding-left}:  double($gel-spacing-unit) !important; }
    .gs-u-pv\+#{$breakpoint-suffix}    { padding-top:       double($gel-spacing-unit) !important; padding-bottom:    double($gel-spacing-unit) !important; }

    /**
     * Huge padding spacing classes (gel spacing unit)
     */
    .gs-u-p\+\+#{$breakpoint-suffix}   { padding:           quadruple($gel-spacing-unit) !important; }
    .gs-u-pt\+\+#{$breakpoint-suffix}  { padding-top:       quadruple($gel-spacing-unit) !important; }
    .gs-u-pr\+\+#{$breakpoint-suffix}  { #{$padding-right}: quadruple($gel-spacing-unit) !important; }
    .gs-u-pb\+\+#{$breakpoint-suffix}  { padding-bottom:    quadruple($gel-spacing-unit) !important; }
    .gs-u-pl\+\+#{$breakpoint-suffix}  { #{$padding-left}:  quadruple($gel-spacing-unit) !important; }
    .gs-u-ph\+\+#{$breakpoint-suffix}  { #{$padding-right}: quadruple($gel-spacing-unit) !important; #{$padding-left}:  quadruple($gel-spacing-unit) !important; }
    .gs-u-pv\+\+#{$breakpoint-suffix}  { padding-top:       quadruple($gel-spacing-unit) !important; padding-bottom:    quadruple($gel-spacing-unit) !important; }

    /**
     * Alt padding spacing classes (gel-alt-spacing-unit)
     */
    .gs-u-p-alt#{$breakpoint-suffix}    { padding:           $gel-alt-spacing-unit !important; }
    .gs-u-pt-alt#{$breakpoint-suffix}   { padding-top:       $gel-alt-spacing-unit !important; }
    .gs-u-pr-alt#{$breakpoint-suffix}   { #{$padding-right}: $gel-alt-spacing-unit !important; }
    .gs-u-pb-alt#{$breakpoint-suffix}   { padding-bottom:    $gel-alt-spacing-unit !important; }
    .gs-u-pl-alt#{$breakpoint-suffix}   { #{$padding-left}:  $gel-alt-spacing-unit !important; }
    .gs-u-ph-alt#{$breakpoint-suffix}   { #{$padding-right}: $gel-alt-spacing-unit !important; #{$padding-left}:  $gel-alt-spacing-unit !important; }
    .gs-u-pv-alt#{$breakpoint-suffix}   { padding-top:       $gel-alt-spacing-unit !important; padding-bottom:    $gel-alt-spacing-unit !important; }

    /**
     * Alt double padding spacing classes (gel-alt-spacing-unit)
     */
    .gs-u-p-alt\+#{$breakpoint-suffix}   { padding:           double($gel-alt-spacing-unit) !important; }
    .gs-u-pt-alt\+#{$breakpoint-suffix}  { padding-top:       double($gel-alt-spacing-unit) !important; }
    .gs-u-pr-alt\+#{$breakpoint-suffix}  { #{$padding-right}: double($gel-alt-spacing-unit) !important; }
    .gs-u-pb-alt\+#{$breakpoint-suffix}  { padding-bottom:    double($gel-alt-spacing-unit) !important; }
    .gs-u-pl-alt\+#{$breakpoint-suffix}  { #{$padding-left}:  double($gel-alt-spacing-unit) !important; }
    .gs-u-ph-alt\+#{$breakpoint-suffix}  { #{$padding-right}: double($gel-alt-spacing-unit) !important; #{$padding-left}:  double($gel-alt-spacing-unit) !important; }
    .gs-u-pv-alt\+#{$breakpoint-suffix}  { padding-top:       double($gel-alt-spacing-unit) !important; padding-bottom:    double($gel-alt-spacing-unit) !important; }

    /**
     * Zero padding spacing classes
     */
    .gs-u-p0#{$breakpoint-suffix}      { padding:           0 !important; }
    .gs-u-pt0#{$breakpoint-suffix}     { padding-top:       0 !important; }
    .gs-u-pr0#{$breakpoint-suffix}     { #{$padding-right}: 0 !important; }
    .gs-u-pb0#{$breakpoint-suffix}     { padding-bottom:    0 !important; }
    .gs-u-pl0#{$breakpoint-suffix}     { #{$padding-left}:  0 !important; }
    .gs-u-ph0#{$breakpoint-suffix}     { #{$padding-right}: 0 !important; #{$padding-left}:  0 !important; }
    .gs-u-pv0#{$breakpoint-suffix}     { padding-top:       0 !important; padding-bottom:    0 !important; }

}

// Output the spacing classes and loop through the array of
// breakpoints output the breakpoint namespaced classes
//
@include _output-spacing-classes();

@if $enhanced {
    @each $breakpoint in $gs-spacing-breakpoints {
        @include mq($from: '#{$gel-grid-breakpoint-namespace}#{$breakpoint}') {
            @include _output-spacing-classes($breakpoint);
        }
    }

    .#{$gel-grid-1280-toggle-class} {
        @each $breakpoint in $gs-spacing-breakpoints--1280 {
            @include mq($from: '#{$gel-grid-breakpoint-namespace}#{$breakpoint}') {
                @include _output-spacing-classes($breakpoint);
            }
        }
    }
}