/*----------------------------------------------------------------------------*\
    HELPERS
    Default classes almost always
\*----------------------------------------------------------------------------*/


/*  Variables
\*----------------------------------------------------------------------------*/

$use-helpers: true !default;
$use-color-helpers: true !default;
$use-spacing-helpers: true !default;
$spacing-steps-amount: 20 !default;

/*  Component
\*----------------------------------------------------------------------------*/

@if $use-helpers == true {

    // TEXT ALIGNMENT
    .text-left {
        text-align: left;
    }

    .text-center {
        text-align: center;
    }

    .text-right {
        text-align: right;
    }

    // LIST
    .list-clean {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    // NOWRAP
    .nowrap {
        white-space: nowrap;
    }

    // VISUALLYHIDDEN
    .visuallyhidden {
        @include visuallyhidden;
    }

    // HELPERS BASED ON BREAKPOINTS
    @each $state in $breakpoint-has-helpers {
        @include media-query(#{$state}) {

            // Text alignment
            .text-left--#{$state} {
                text-align: left;
            }
            .text-center--#{$state} {
                text-align: center;
            }
            .text-right--#{$state} {
                text-align: right;
            }

            // visuallyhidden
            .visuallyhidden--#{$state} {
                @include visuallyhidden();
            }

        }
    }

}

/*  COLORS
\*----------------------------------------------------------------------------*/
@if $use-color-helpers == true {
    // HELPERS BASED ON COLORS
    @each $color, $value in $colors {
        .bg--#{$color} {
            background-color: $value !important;
        }
        .color--#{$color} {
            color: $value !important;
        }
        .fill--#{$color} {
            fill: $value !important;
        }
    }
}

/*  SPACING
\*----------------------------------------------------------------------------*/
@if $use-spacing-helpers == true {

    // Margin + (top,right,bottom,left)
    @for $i from 0 through $spacing-steps-amount{
        $step : $i*5;
        .m-t-#{$step} {
            margin-top: ($step*0.1rem)!important;
        }
        .m-r-#{$step} {
            margin-right: ($step*0.1rem)!important;
        }
        .m-l-#{$step} {
            margin-left: ($step*0.1rem)!important;
        }
        .m-b-#{$step} {
            margin-bottom: ($step*0.1rem)!important;
        }
    }

    // Margin - (top,right,bottom,left)
    @for $i from 0 through $spacing-steps-amount{
        $step : $i*5;
        .m-t-negative-#{$step} {
            margin-top: -($step*0.1rem)!important;
        }
        .m-r-negative-#{$step} {
            margin-right: -($step*0.1rem)!important;
        }
        .m-l-negative-#{$step} {
            margin-left: -($step*0.1rem)!important;
        }
        .m-b-negative-#{$step} {
            margin-bottom: -($step*0.1rem)!important;
        }
    }

    // Padding (top,right,bottom,left)
    @for $i from 0 through $spacing-steps-amount{
        $step : $i*5;
        .p-t-#{$step} {
            padding-top: ($step*0.1rem)!important;
        }
        .p-r-#{$step} {
            padding-right: ($step*0.1rem)!important;
        }
        .p-l-#{$step} {
            padding-left: ($step*0.1rem)!important;
        }
        .p-b-#{$step} {
            padding-bottom: ($step*0.1rem)!important;
        }
    }

    @each $state in $breakpoint-has-spacing-helpers {
        @include media-query(#{$state}) {

            // Margin + (top,right,bottom,left)
            @for $i from 0 through $spacing-steps-amount{
                $step : $i*5;
                .m-t-#{$step}--#{$state} {
                    margin-top: ($step*0.1rem)!important;
                }
                .m-r-#{$step}--#{$state} {
                    margin-right: ($step*0.1rem)!important;
                }
                .m-l-#{$step}--#{$state} {
                    margin-left: ($step*0.1rem)!important;
                }
                .m-b-#{$step}--#{$state} {
                    margin-bottom: ($step*0.1rem)!important;
                }
            }

            // Margin - (top,right,bottom,left)
            @for $i from 0 through $spacing-steps-amount{
                $step : $i*5;
                .m-t-negative-#{$step}--#{$state} {
                    margin-top: ($step*0.1rem)!important;
                }
                .m-r-negative-#{$step}--#{$state} {
                    margin-right: ($step*0.1rem)!important;
                }
                .m-l-negative-#{$step}--#{$state} {
                    margin-left: ($step*0.1rem)!important;
                }
                .m-b-negative-#{$step}--#{$state} {
                    margin-bottom: ($step*0.1rem)!important;
                }
            }

            // Padding (top,right,bottom,left)
            @for $i from 0 through $spacing-steps-amount{
                $step : $i*5;
                .p-t-#{$step}--#{$state} {
                    padding-top: ($step*0.1rem)!important;
                }
                .p-r-#{$step}--#{$state} {
                    padding-right: ($step*0.1rem)!important;
                }
                .p-l-#{$step}--#{$state} {
                    padding-left: ($step*0.1rem)!important;
                }
                .p-b-#{$step}--#{$state} {
                    padding-bottom: ($step*0.1rem)!important;
                }
            }

        }
    }

}