/// This is equivalent to `gap: 0;`.
/// @example gap: 0;
/// @name .k-gap-0
/// @group gap
/// @contextType css

/// This is equivalent to `gap: 1px;`.
/// @example gap: 1px;
/// @name .k-gap-1px
/// @group gap
/// @contextType css

/// This is equivalent to `gap: 0.25rem;`.
/// @example gap: 0.25rem;
/// @name .k-gap-1
/// @group gap
/// @contextType css

/// This is equivalent to `gap: 0.25rem;`.
/// @example gap: 0.25rem;
/// @name .k-gap-xs
/// @group gap
/// @contextType css

/// This is equivalent to `gap: 0.5rem;`.
/// @example gap: 0.5rem;
/// @name .k-gap-sm
/// @group gap
/// @contextType css

/// This is equivalent to `gap: 0.75rem;`.
/// @example gap: 0.75rem;
/// @name .k-gap-md
/// @group gap
/// @contextType css

/// This is equivalent to `gap: 1rem;`.
/// @example gap: 1rem;
/// @name .k-gap-lg
/// @group gap
/// @contextType css

/// This is equivalent to `gap: 1.5rem;`.
/// @example gap: 1.5rem;
/// @name .k-gap-xl
/// @group gap
/// @contextType css

/// This is equivalent to `gap: 0.125rem;`.
/// @example gap: 0.125rem;
/// @name .k-gap-thin
/// @group gap
/// @contextType css

/// This is equivalent to `gap: 1px;`.
/// @example gap: 1px;
/// @name .k-gap-hair
/// @group gap
/// @contextType css

/// This is equivalent to `column-gap: 0;`.
/// @example column-gap: 0;
/// @name .k-gap-x-0
/// @group gap
/// @contextType css

/// This is equivalent to `column-gap: 1px;`.
/// @example column-gap: 1px;
/// @name .k-gap-x-1px
/// @group gap
/// @contextType css

/// This is equivalent to `column-gap: 0.25rem;`.
/// @example column-gap: 0.25rem;
/// @name .k-gap-x-1
/// @group gap
/// @contextType css

/// This is equivalent to `column-gap: 0.25rem;`.
/// @example column-gap: 0.25rem;
/// @name .k-gap-x-xs
/// @group gap
/// @contextType css

/// This is equivalent to `column-gap: 0.5rem;`.
/// @example column-gap: 0.5rem;
/// @name .k-gap-x-sm
/// @group gap
/// @contextType css

/// This is equivalent to `column-gap: 0.75rem;`.
/// @example column-gap: 0.75rem;
/// @name .k-gap-x-md
/// @group gap
/// @contextType css

/// This is equivalent to `column-gap: 1rem;`.
/// @example column-gap: 1rem;
/// @name .k-gap-x-lg
/// @group gap
/// @contextType css

/// This is equivalent to `column-gap: 1.5rem;`.
/// @example column-gap: 1.5rem;
/// @name .k-gap-x-xl
/// @group gap
/// @contextType css

/// This is equivalent to `column-gap: 0.125rem;`.
/// @example column-gap: 0.125rem;
/// @name .k-gap-x-thin
/// @group gap
/// @contextType css

/// This is equivalent to `column-gap: 1px;`.
/// @example column-gap: 1px;
/// @name .k-gap-x-hair
/// @group gap
/// @contextType css

/// This is equivalent to `row-gap: 0;`.
/// @example row-gap: 0;
/// @name .k-gap-y-0
/// @group gap
/// @contextType css

/// This is equivalent to `row-gap: 1px;`.
/// @example row-gap: 1px;
/// @name .k-gap-y-1px
/// @group gap
/// @contextType css

/// This is equivalent to `row-gap: 0.25rem;`.
/// @example row-gap: 0.25rem;
/// @name .k-gap-y-1
/// @group gap
/// @contextType css

/// This is equivalent to `row-gap: 0.25rem;`.
/// @example row-gap: 0.25rem;
/// @name .k-gap-y-xs
/// @group gap
/// @contextType css

/// This is equivalent to `row-gap: 0.5rem;`.
/// @example row-gap: 0.5rem;
/// @name .k-gap-y-sm
/// @group gap
/// @contextType css

/// This is equivalent to `row-gap: 0.75rem;`.
/// @example row-gap: 0.75rem;
/// @name .k-gap-y-md
/// @group gap
/// @contextType css

/// This is equivalent to `row-gap: 1rem;`.
/// @example row-gap: 1rem;
/// @name .k-gap-y-lg
/// @group gap
/// @contextType css

/// This is equivalent to `row-gap: 1.5rem;`.
/// @example row-gap: 1.5rem;
/// @name .k-gap-y-xl
/// @group gap
/// @contextType css

/// This is equivalent to `row-gap: 0.125rem;`.
/// @example row-gap: 0.125rem;
/// @name .k-gap-y-thin
/// @group gap
/// @contextType css

/// This is equivalent to `row-gap: 1px;`.
/// @example row-gap: 1px;
/// @name .k-gap-y-hair
/// @group gap
/// @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--gap() {
    @include import-once("utils-flex-grid-gap") {

        // Gap utility classes
        $kendo-utils-gap: map.get( $kendo-utils, "gap" ) !default;
        @include generate-utils( gap, gap, $kendo-utils-gap, $css-var: "spacing" );
        @include generate-utils( gap-x, column-gap, $kendo-utils-gap, $css-var: "spacing" );
        @include generate-utils( gap-y, row-gap, $kendo-utils-gap, $css-var: "spacing" );

    }
}

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

    // Gap responsive utility classes
    $kendo-utils-gap: map.get( $kendo-utils, "gap" ) !default;
    @include generate-utils( gap-#{$key}, gap, $kendo-utils-gap, $css-var: "spacing", $important: false );
    @include generate-utils( gap-x-#{$key}, column-gap, $kendo-utils-gap, $css-var: "spacing", $important: false );
    @include generate-utils( gap-y-#{$key}, row-gap, $kendo-utils-gap, $css-var: "spacing", $important: false );

}