@mixin dc-row {
    @include dc-grid-row;
    display: flex;
    flex-flow: row wrap;
}

@mixin dc-row--collapse ($column-selector: ".dc-column") {
    margin-right: 0;
    margin-left: 0;

    > #{$column-selector} {
        padding-right: 0;
        padding-left: 0;
    }
}

@mixin dc-row--align--right {
    justify-content: flex-end;
}

@mixin dc-row--align--center {
    justify-content: center;
}

@mixin dc-row--align--justify {
    justify-content: space-between;
}

@mixin dc-row--align--spaced {
    justify-content: space-around;
}

@mixin dc-row--align--top {
    align-items: flex-start;
}

@mixin dc-row--align--middle {
    align-items: center;
}

@mixin dc-row--align--bottom {
    align-items: flex-end;
}

@mixin dc-column {
    @include dc-grid-column;
}

@mixin dc-column--align-self--top {
    align-self: flex-start;
}

@mixin dc-column--align-self--middle {
    align-self: center;
}

@mixin dc-column--align-self--bottom {
    align-self: flex-end;
}

@mixin dc-column--shrink {
    flex: 0 0 auto;
}

@mixin dc-grid-selectors {
    .dc-row {
        @include dc-row;
    }

    .dc-row--collapse {
        @include dc-row--collapse;
    }

    .dc-row--align--center {
        @include dc-row--align--center;
    }

    .dc-row--align--right {
        @include dc-row--align--right;
    }

    .dc-row--align--justify {
        @include dc-row--align--justify;
    }

    .dc-row--align--spaced {
        @include dc-row--align--spaced;
    }

    .dc-row--align--top {
        @include dc-row--align--top;
    }

    .dc-row--align--middle {
        @include dc-row--align--middle;
    }

    .dc-row--align--bottom {
        @include dc-row--align--bottom;
    }

    .dc-column {
        @include dc-column;
    }

    .dc-column--shrink {
        @include dc-column--shrink;
    }

    .dc-column--align-self--top {
        @include dc-column--align-self--top;
    }

    .dc-column--align-self--middle {
        @include dc-column--align-self--middle;
    }

    .dc-column--align-self--bottom {
        @include dc-column--align-self--bottom;
    }

    // Run through breakpoints.
    @each $br, $value in $dc-grid-breakpoints {

        .dc-show-from-#{$br} {
            display:none;
        }

        @media (min-width:map-get($dc-grid-breakpoints, $br)) {

            // Utility classes to hide / show according to breakpoint

            // Hide from this breakpoint up
            .dc-hide-from-#{$br} {
                display: none !important;
            }

            // Show from this breakpoint up
            .dc-show-from-#{$br} {
                display: block !important;
            }

            // For each breakpoint make the required column and offset classes.
            @for $i from 1 through $dc-grid-column-count {
                .dc-column--#{$br}-#{$i} {
                    flex: grid-column-flex($i);
                    max-width: grid-column-size($i);

                }

                //Block grid
                .dc-block-grid--#{$br}-#{$i} {
                    @include dc-block-grid($i);
                }

                //We need offsets for all sizes (from 0) except last.
                $o: $i - 1;

                .dc-column-offset--#{$br}-#{$o} {
                    margin-left: grid-column-size($o);
                }

            }
        }
    }
}