/// This is equivalent to `grid-template-columns: repeat(1, minmax(0, 1fr));`.
/// @example grid-template-columns: repeat(1, minmax(0, 1fr));
/// @name .k-grid-cols-1
/// @group grid-template-columns
/// @contextType css

/// This is equivalent to `grid-template-columns: repeat(2, minmax(0, 1fr));`.
/// @example grid-template-columns: repeat(2, minmax(0, 1fr));
/// @name .k-grid-cols-2
/// @group grid-template-columns
/// @contextType css

/// This is equivalent to `grid-template-columns: repeat(3, minmax(0, 1fr));`.
/// @example grid-template-columns: repeat(3, minmax(0, 1fr));
/// @name .k-grid-cols-3
/// @group grid-template-columns
/// @contextType css

/// This is equivalent to `grid-template-columns: repeat(4, minmax(0, 1fr));`.
/// @example grid-template-columns: repeat(4, minmax(0, 1fr));
/// @name .k-grid-cols-4
/// @group grid-template-columns
/// @contextType css

/// This is equivalent to `grid-template-columns: repeat(5, minmax(0, 1fr));`.
/// @example grid-template-columns: repeat(5, minmax(0, 1fr));
/// @name .k-grid-cols-5
/// @group grid-template-columns
/// @contextType css

/// This is equivalent to `grid-template-columns: repeat(6, minmax(0, 1fr));`.
/// @example grid-template-columns: repeat(6, minmax(0, 1fr));
/// @name .k-grid-cols-6
/// @group grid-template-columns
/// @contextType css

/// This is equivalent to `grid-template-columns: repeat(7, minmax(0, 1fr));`.
/// @example grid-template-columns: repeat(7, minmax(0, 1fr));
/// @name .k-grid-cols-7
/// @group grid-template-columns
/// @contextType css

/// This is equivalent to `grid-template-columns: repeat(8, minmax(0, 1fr));`.
/// @example grid-template-columns: repeat(8, minmax(0, 1fr));
/// @name .k-grid-cols-8
/// @group grid-template-columns
/// @contextType css

/// This is equivalent to `grid-template-columns: repeat(9, minmax(0, 1fr));`.
/// @example grid-template-columns: repeat(9, minmax(0, 1fr));
/// @name .k-grid-cols-9
/// @group grid-template-columns
/// @contextType css

/// This is equivalent to `grid-template-columns: repeat(10, minmax(0, 1fr));`.
/// @example grid-template-columns: repeat(10, minmax(0, 1fr));
/// @name .k-grid-cols-10
/// @group grid-template-columns
/// @contextType css

/// This is equivalent to `grid-template-columns: repeat(11, minmax(0, 1fr));`.
/// @example grid-template-columns: repeat(11, minmax(0, 1fr));
/// @name .k-grid-cols-11
/// @group grid-template-columns
/// @contextType css

/// This is equivalent to `grid-template-columns: repeat(12, minmax(0, 1fr));`.
/// @example grid-template-columns: repeat(12, minmax(0, 1fr));
/// @name .k-grid-cols-12
/// @group grid-template-columns
/// @contextType css

/// This is equivalent to `grid-template-columns: none;`.
/// @example grid-template-columns: none;
/// @name .k-grid-cols-none
/// @group grid-template-columns
/// @contextType css

// ============================================================================
// Responsive Grid Template Columns Utilities
// ============================================================================

/// This is equivalent to `grid-template-columns: repeat(1, minmax(0, 1fr)); for the specific breakpoint`.
/// @example grid-template-columns: repeat(1, minmax(0, 1fr));
/// @name .k-grid-cols-{xs|sm|md|lg|xl|xxl}-1
/// @group grid-template-columns-responsive
/// @contextType css

/// This is equivalent to `grid-template-columns: repeat(2, minmax(0, 1fr)); for the specific breakpoint`.
/// @example grid-template-columns: repeat(2, minmax(0, 1fr));
/// @name .k-grid-cols-{xs|sm|md|lg|xl|xxl}-2
/// @group grid-template-columns-responsive
/// @contextType css

/// This is equivalent to `grid-template-columns: repeat(3, minmax(0, 1fr)); for the specific breakpoint`.
/// @example grid-template-columns: repeat(3, minmax(0, 1fr));
/// @name .k-grid-cols-{xs|sm|md|lg|xl|xxl}-3
/// @group grid-template-columns-responsive
/// @contextType css

/// This is equivalent to `grid-template-columns: repeat(4, minmax(0, 1fr)); for the specific breakpoint`.
/// @example grid-template-columns: repeat(4, minmax(0, 1fr));
/// @name .k-grid-cols-{xs|sm|md|lg|xl|xxl}-4
/// @group grid-template-columns-responsive
/// @contextType css

/// This is equivalent to `grid-template-columns: repeat(5, minmax(0, 1fr)); for the specific breakpoint`.
/// @example grid-template-columns: repeat(5, minmax(0, 1fr));
/// @name .k-grid-cols-{xs|sm|md|lg|xl|xxl}-5
/// @group grid-template-columns-responsive
/// @contextType css

/// This is equivalent to `grid-template-columns: repeat(6, minmax(0, 1fr)); for the specific breakpoint`.
/// @example grid-template-columns: repeat(6, minmax(0, 1fr));
/// @name .k-grid-cols-{xs|sm|md|lg|xl|xxl}-6
/// @group grid-template-columns-responsive
/// @contextType css

/// This is equivalent to `grid-template-columns: repeat(7, minmax(0, 1fr)); for the specific breakpoint`.
/// @example grid-template-columns: repeat(7, minmax(0, 1fr));
/// @name .k-grid-cols-{xs|sm|md|lg|xl|xxl}-7
/// @group grid-template-columns-responsive
/// @contextType css

/// This is equivalent to `grid-template-columns: repeat(8, minmax(0, 1fr)); for the specific breakpoint`.
/// @example grid-template-columns: repeat(8, minmax(0, 1fr));
/// @name .k-grid-cols-{xs|sm|md|lg|xl|xxl}-8
/// @group grid-template-columns-responsive
/// @contextType css

/// This is equivalent to `grid-template-columns: repeat(9, minmax(0, 1fr)); for the specific breakpoint`.
/// @example grid-template-columns: repeat(9, minmax(0, 1fr));
/// @name .k-grid-cols-{xs|sm|md|lg|xl|xxl}-9
/// @group grid-template-columns-responsive
/// @contextType css

/// This is equivalent to `grid-template-columns: repeat(10, minmax(0, 1fr)); for the specific breakpoint`.
/// @example grid-template-columns: repeat(10, minmax(0, 1fr));
/// @name .k-grid-cols-{xs|sm|md|lg|xl|xxl}-10
/// @group grid-template-columns-responsive
/// @contextType css

/// This is equivalent to `grid-template-columns: repeat(11, minmax(0, 1fr)); for the specific breakpoint`.
/// @example grid-template-columns: repeat(11, minmax(0, 1fr));
/// @name .k-grid-cols-{xs|sm|md|lg|xl|xxl}-11
/// @group grid-template-columns-responsive
/// @contextType css

/// This is equivalent to `grid-template-columns: repeat(12, minmax(0, 1fr)); for the specific breakpoint`.
/// @example grid-template-columns: repeat(12, minmax(0, 1fr));
/// @name .k-grid-cols-{xs|sm|md|lg|xl|xxl}-12
/// @group grid-template-columns-responsive
/// @contextType css

@use "sass:map";
@use "../_globals.scss" as *;

// Register
@use "@progress/kendo-theme-core/scss/mixins/import-once.scss" as *;

@mixin kendo-utils--flex-grid--grid-template-columns() {
    @include import-once("utils-flex-grid-grid-template-columns") {

        // Grid template columns utility classes
        $kendo-utils-grid-template-columns: map.get( $kendo-utils, "grid-template-columns" ) !default;
        @include generate-utils( grid-cols, grid-template-columns, $kendo-utils-grid-template-columns );

    }
}

@mixin kendo-utils--flex-grid--grid-template-columns--responsive($key) {

    // Grid template columns responsive utility classes
    $kendo-utils-grid-template-columns: map.get( $kendo-utils, "grid-template-columns" ) !default;
    @include generate-utils( grid-cols-#{$key}, grid-template-columns, $kendo-utils-grid-template-columns, $important: false );

}