@import "grid.vars";

// Grid
// --------------------------------------------------

:host {
    /**
     * @prop --lu-grid-padding: Padding for the Grid
     * @prop --lu-grid-padding-xs: Padding for the Grid on xs screens
     * @prop --lu-grid-padding-sm: Padding for the Grid on sm screens
     * @prop --lu-grid-padding-md: Padding for the Grid on md screens
     * @prop --lu-grid-padding-lg: Padding for the Grid on lg screens
     * @prop --lu-grid-padding-xl: Padding for the Grid on xl screens
     *
     * @prop --lu-grid-width: Width of the fixed Grid
     * @prop --lu-grid-width-xs: Width of the fixed Grid on xs screens
     * @prop --lu-grid-width-sm: Width of the fixed Grid on sm screens
     * @prop --lu-grid-width-md: Width of the fixed Grid on md screens
     * @prop --lu-grid-width-lg: Width of the fixed Grid on lg screens
     * @prop --lu-grid-width-xl: Width of the fixed Grid on xl screens
     */

    @include make-breakpoint-padding($grid-paddings);
    @include margin-horizontal(auto);

    display: block;
}

// Fixed Grid
// --------------------------------------------------

:host(.grid-fixed) {
    @include make-grid-widths();
}

// Grid Padding
// --------------------------------------------------

// Remove the padding from grid and all immediate children columns
:host([no-padding]) {
    @include padding(0);
}

:host([no-padding]) ::slotted(lu-col) {
    @include padding(0);
}