////
/// @group Structure and Grid
////


/// Mixin for creating a row.
/// <br>
/// Sets the negative right and left margin for the row to align the columns inside a row.
/// <br>
/// As each column has padding (for gutter), negative margin on row is applied.
///
/// @param {Map} $gutter [$dc-grid-gutter] - A Map of gutter values for different breakpoint sizes
@mixin dc-grid-row ($gutter: $dc-grid-gutter) {
    @if type-of($gutter) == "map" {
        @each $br, $value in $gutter {
            $padding: -($value / 2);

            @media (min-width:map-get($dc-grid-breakpoints, $br)) {
                margin-right: $padding;
                margin-left: $padding;
            }
        }
    }
}

/// Mixin for creating a column.
/// <br>
/// Sets the flex value for the column.
/// <br>
/// Sets the padding for column based on the gutter space per breakpoint.
///
/// @param {Number} $columns [null] - Size (or span) of the column.
/// @param {Map} $gutter [$dc-grid-gutter] - A Map of gutter values for different breakpoint sizes.
@mixin dc-grid-column (
    $columns: null,
    $gutter: $dc-grid-gutter
) {
    flex: grid-column-flex($columns);
    // Gutters
    @if type-of($gutter) == "map" {
        @each $br, $value in $gutter {
            $padding: ($value / 2);

            @media (min-width:map-get($dc-grid-breakpoints, $br)) {
                padding-right: $padding;
                padding-left: $padding;
            }
        }
    }
}

/// Mixin for creating a block grid.
/// <br>
/// Sets the flex value for the child columns
///
/// @param {Number} $columns - Number of columns in each row
/// @param {String} $column-selector [".dc-column"] - Selector for column within the row.
@mixin dc-block-grid (
    $columns,
    $column-selector: ".dc-column"
) {
    flex-wrap: wrap;

    > #{$column-selector} {
        $flex-percent: percentage(1 / $columns);
        flex: 0 0 $flex-percent;
        max-width: $flex-percent;
    }
}

/// Function for calculating flex property value for a column.
/// <br>
/// Returns flex property value based on the number of columns supplied.
///
/// @param {Number} $columns [null] - Size (or span) of the column.
/// @returns {Flex} flex property value based on the number of columns supplied.
@function grid-column-flex($columns: null) {
    $flex: 1 1 0;

    @if $columns != null {
        $flex: 0 0 grid-column-size($columns);
    }

    @return $flex;
}

/// Calculates the width of a column in percentage.
/// <br>
/// This is used for calculating flex percentage, max-widths, and offset widths
///
/// @param {Number} $columns - Number of columns
/// @returns {Width} width in percentage
@function grid-column-size($columns: null) {
    $width: 0;

    @if type-of($columns) == "number" {
        @if $columns < 1 {
            $width: percentage($columns);
        } @else {
            $width: percentage($columns / $dc-grid-column-count);
        }
    } @else {
        @error "Wrong syntax for columns. It must be a number (of columns)";
    }

    @return $width;
}