@import './mixins.scss';
@import './mixins_container_query';

:host(.nx-grid.nx-grid--media-query) {
    @include make-container-by-media-query($gutters: $grid-gutter-widths);
}

:host(.nx-grid.nx-grid--container-query) {
    container-type: inline-size;
    @include make-container-by-container-query($gutters: $grid-gutter-widths);
}

// Use to remove all spacing between cells
:host(.nx-grid--no-gutters) ::ng-deep {
    padding-left: 0;
    padding-right: 0;

    .nx-grid__row {
        margin-left: 0;
        margin-right: 0;
    }

    // only from all immediate children columns (to prevent runaway style inheritance).
    .nx-grid__row > [class*='nx-grid__column'] {
        padding-left: 0;
        padding-right: 0;
    }
}

// Use to remove the outer spacing, for "edge to edge container" components
:host(.nx-grid--no-padding.nx-grid--media-query) ::ng-deep {
    padding-left: 0;
    padding-right: 0;

    .nx-grid__row {
        margin-left: -$grid-gutter-width-base * 0.5;
        margin-right: -$grid-gutter-width-base * 0.5;

        @include media-breakpoint-down(small) {
            margin-left: -$grid-gutter-width-mobile * 0.5;
            margin-right: -$grid-gutter-width-mobile * 0.5;
        }
    }
}

// Use to remove the outer spacing, for "edge to edge container" components
:host(.nx-grid--no-padding.nx-grid--container-query) ::ng-deep {
    padding-left: 0;
    padding-right: 0;

    .nx-grid__row {
        margin-left: -$grid-gutter-width-base * 0.5;
        margin-right: -$grid-gutter-width-base * 0.5;

        @include container-breakpoint-down(small) {
            margin-left: -$grid-gutter-width-mobile * 0.5;
            margin-right: -$grid-gutter-width-mobile * 0.5;
        }
    }
}

:host(.nx-grid--max-width) {
    max-width: 100%;
    width: v(grid-max-width);
}
