/* Grid mixins -------- */

$sd-grid-columns-mobile: 6;
$sd-grid-columns-tablet: 12; // tablet plus

$sd-grid-max-width: 1620px;

$sd-grid-gutter-mobile: 16px;
$sd-grid-gutter-tablet: 24px; // tablet plus

$sd-grid-horizontal-padding-mobile: 24px;
$sd-grid-horizontal-padding-tablet: 48px;
$sd-grid-horizontal-padding-desktop: 72px;

$sd-grid-vertical-padding: 64px;
$sd-grid-vertical-padding-mobile: 32px;

// Specifies the centered location within the grid given the grid item's size (measured in amt of columns)
@mixin sd-grid-center($item-size: 12) {
    $start-column-tablet: calc((($sd-grid-columns-tablet - $item-size) / 2) + 1);

    @include sd-viewport($sd-tablet-plus) {
        grid-column: $start-column-tablet / span $item-size;
    }
}

// Provides padding for the outer edges
@mixin sd-grid-padding() {
    @include sd-grid-padding-x();
    @include sd-grid-padding-y();
}
@mixin sd-grid-padding-x() {
    padding-right: $sd-grid-horizontal-padding-mobile;
    padding-left: $sd-grid-horizontal-padding-mobile;

    @include sd-viewport($sd-tablet) {
        padding-left: $sd-grid-horizontal-padding-tablet;
        padding-right: $sd-grid-horizontal-padding-tablet;
    }
    @include sd-viewport($sd-desktop) {
        padding-left: $sd-grid-horizontal-padding-desktop;
        padding-right: $sd-grid-horizontal-padding-desktop;
    }
}
@mixin sd-grid-padding-y() {
    padding-top: $sd-grid-vertical-padding-mobile;
    padding-bottom: $sd-grid-vertical-padding-mobile;

    @include sd-viewport($sd-desktop) {
        padding-top: $sd-grid-vertical-padding;
        padding-bottom: $sd-grid-vertical-padding;
    }
}

// Defines a maximum width on wide screens and keeps content centered on wide screens
@mixin sd-grid-container {
    margin: 0 auto;
    width: 100%;
    max-width: $sd-grid-max-width;
}

// Divides content into rows and columns.
@mixin sd-grid-columns {
    display: grid;
    grid-column-gap: $sd-grid-gutter-mobile;
    grid-template-columns: repeat($sd-grid-columns-mobile, 1fr);
    @include sd-viewport($sd-tablet-plus) {
        grid-column-gap: $sd-grid-gutter-tablet;
        grid-template-columns: repeat($sd-grid-columns-tablet, 1fr);
    }
    > * {
        grid-column: 1 / -1;
    }
}

// Creates centered grid item with tablet being 2 columns wider than desktop unless tablet column width is also specified
@mixin sd-grid-center-layout($desktop-column: 8, $tablet-column: null) {
    @include sd-viewport($sd-desktop) {
        @include sd-grid-center($desktop-column);
    }
    @include sd-viewport($sd-tablet) {
        @if $tablet-column {
            @include sd-grid-center($tablet-column);
        } @else {
            @include sd-grid-center($desktop-column + 2);
        }
    }
}