// Utility variable - you should never need to modify this
$padding: $grid-gutter-width * 0.5;

// Our row container
@mixin row($padding: 0) {
    @include clearfix();
    box-sizing: border-box;
    display: block;
    margin-right: auto;
    margin-left: auto;
    padding-right: $padding;
    padding-left: $padding;
}

@mixin row-flush() {
    margin-left: -$padding;
    margin-right: -$padding;
}

// Our column container
@mixin column($x, $padding: $padding, $grid-columns: $grid-columns) {
    box-sizing: border-box;
    display: inline;
    float: left;
    width: 100% * ($x / $grid-columns);
    padding-right: $padding;
    padding-left: $padding;
}

@mixin table-column($x, $padding: $padding, $grid-columns: $grid-columns) {
    box-sizing: border-box;
    width: 100% * ($x / $grid-columns);
}

// Push adds left padding
@mixin push($offset: 1, $grid-columns: $grid-columns) {
    margin-left: 100% * ($offset / $grid-columns);
}

@mixin push-padding($offset: 1, $grid-columns: $grid-columns) {
    padding-left: 100% * ($offset / $grid-columns);
}

// Pull adds right padding
@mixin pull($offset: 1, $grid-columns: $grid-columns) {
    margin-right: 100% * ($offset / $grid-columns);
}

@mixin pull-padding($offset: 1, $grid-columns: $grid-columns) {
    padding-right: 100% * ($offset / $grid-columns);
}

// only used in places where padding not applied to same elements as row or row-flush
// most of the time this class should be applied directly to the html elements
@mixin nice-padding {
    padding-left: $mobile-nice-padding;
    padding-right: $mobile-nice-padding;

    @include media-breakpoint-up(sm) {
        padding-left: $desktop-nice-padding;
        padding-right: $desktop-nice-padding;
    }
}

@mixin nice-margin {
    margin-left: $mobile-nice-padding;
    margin-right: $mobile-nice-padding;

    @include media-breakpoint-up(sm) {
        margin-left: $desktop-nice-padding;
        margin-right: $desktop-nice-padding;
    }
}