/// This is equivalent to `gap: 0;`.
/// @example gap: 0;
/// @name .k-gap-{0-30}
/// @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.125rem;`.
/// @example gap: 0.125rem;
/// @name .k-gap-0\.5
/// @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-30}
/// @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.125rem;`.
/// @example column-gap: 0.125rem;
/// @name .k-gap-x-0\.5
/// @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-30}
/// @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.125rem;`.
/// @example row-gap: 0.125rem;
/// @name .k-gap-y-0\.5
/// @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

// ============================================================================
// Responsive Gap Utilities
// ============================================================================

/// This is equivalent to `gap: 0;`.
/// @example gap: 0;
/// @name .k-gap-{xs|sm|md|lg|xl|xxl}-{0-30}
/// @group gap-responsive
/// @contextType css

/// This is equivalent to `gap: 1px;`.
/// @example gap: 1px;
/// @name .k-gap-{xs|sm|md|lg|xl|xxl}-1px
/// @group gap-responsive
/// @contextType css

/// This is equivalent to `gap: 0.125rem;`.
/// @example gap: 0.25rem;
/// @name .k-gap-{xs|sm|md|lg|xl|xxl}-0\.5
/// @group gap-responsive
/// @contextType css

/// This is equivalent to `gap: 0.25rem;`.
/// @example gap: 0.25rem;
/// @name .k-gap-{xs|sm|md|lg|xl|xxl}-xs
/// @group gap-responsive
/// @contextType css

/// This is equivalent to `gap: 0.5rem;`.
/// @example gap: 0.5rem;
/// @name .k-gap-{xs|sm|md|lg|xl|xxl}-sm
/// @group gap-responsive
/// @contextType css

/// This is equivalent to `gap: 0.75rem;`.
/// @example gap: 0.75rem;
/// @name .k-gap-{xs|sm|md|lg|xl|xxl}-md
/// @group gap-responsive
/// @contextType css

/// This is equivalent to `gap: 1rem;`.
/// @example gap: 1rem;
/// @name .k-gap-{xs|sm|md|lg|xl|xxl}-lg
/// @group gap-responsive
/// @contextType css

/// This is equivalent to `gap: 1.5rem;`.
/// @example gap: 1.5rem;
/// @name .k-gap-{xs|sm|md|lg|xl|xxl}-xl
/// @group gap-responsive
/// @contextType css

/// This is equivalent to `gap: 0.125rem;`.
/// @example gap: 0.125rem;
/// @name .k-gap-{xs|sm|md|lg|xl|xxl}-thin
/// @group gap-responsive
/// @contextType css

/// This is equivalent to `gap: 1px;`.
/// @example gap: 1px;
/// @name .k-gap-hair-{xs|sm|md|lg|xl|xxl}
/// @group gap-responsive
/// @contextType css

/// This is equivalent to `column-gap: 0;`.
/// @example column-gap: 0;
/// @name .k-gap-x-{xs|sm|md|lg|xl|xxl}-{0-30}
/// @group gap-responsive
/// @contextType css

/// This is equivalent to `column-gap: 1px;`.
/// @example column-gap: 1px;
/// @name .k-gap-x-{xs|sm|md|lg|xl|xxl}-1px
/// @group gap-responsive
/// @contextType css

/// This is equivalent to `column-gap: 0.125rem;`.
/// @example column-gap: 0.125rem;
/// @name .k-gap-x-{xs|sm|md|lg|xl|xxl}-0\.5
/// @group gap-responsive
/// @contextType css

/// This is equivalent to `column-gap: 0.25rem;`.
/// @example column-gap: 0.25rem;
/// @name .k-gap-x-{xs|sm|md|lg|xl|xxl}-xs
/// @group gap-responsive
/// @contextType css

/// This is equivalent to `column-gap: 0.5rem;`.
/// @example column-gap: 0.5rem;
/// @name .k-gap-x-{xs|sm|md|lg|xl|xxl}-sm
/// @group gap-responsive
/// @contextType css

/// This is equivalent to `column-gap: 0.75rem;`.
/// @example column-gap: 0.75rem;
/// @name .k-gap-x-{xs|sm|md|lg|xl|xxl}-md
/// @group gap-responsive
/// @contextType css

/// This is equivalent to `column-gap: 1rem;`.
/// @example column-gap: 1rem;
/// @name .k-gap-x-{xs|sm|md|lg|xl|xxl}-lg
/// @group gap-responsive
/// @contextType css

/// This is equivalent to `column-gap: 1.5rem;`.
/// @example column-gap: 1.5rem;
/// @name .k-gap-x-{xs|sm|md|lg|xl|xxl}-xl
/// @group gap-responsive
/// @contextType css

/// This is equivalent to `column-gap: 0.125rem;`.
/// @example column-gap: 0.125rem;
/// @name .k-gap-x-{xs|sm|md|lg|xl|xxl}-thin
/// @group gap-responsive
/// @contextType css

/// This is equivalent to `column-gap: 1px;`.
/// @example column-gap: 1px;
/// @name .k-gap-x-{xs|sm|md|lg|xl|xxl}-hair
/// @group gap-responsive
/// @contextType css

/// This is equivalent to `row-gap: 0;`.
/// @example row-gap: 0;
/// @name .k-gap-y-{xs|sm|md|lg|xl|xxl}-{0-30}
/// @group gap-responsive
/// @contextType css

/// This is equivalent to `row-gap: 1px;`.
/// @example row-gap: 1px;
/// @name .k-gap-y-{xs|sm|md|lg|xl|xxl}-1px
/// @group gap-responsive
/// @contextType css

/// This is equivalent to `row-gap: 0.125rem;`.
/// @example row-gap: 0.125rem;
/// @name .k-gap-y-{xs|sm|md|lg|xl|xxl}-0\.5
/// @group gap-responsive
/// @contextType css

/// This is equivalent to `row-gap: 0.25rem;`.
/// @example row-gap: 0.25rem;
/// @name .k-gap-y-{xs|sm|md|lg|xl|xxl}-xs
/// @group gap-responsive
/// @contextType css

/// This is equivalent to `row-gap: 0.5rem;`.
/// @example row-gap: 0.5rem;
/// @name .k-gap-y-{xs|sm|md|lg|xl|xxl}-sm
/// @group gap-responsive
/// @contextType css

/// This is equivalent to `row-gap: 0.75rem;`.
/// @example row-gap: 0.75rem;
/// @name .k-gap-y-{xs|sm|md|lg|xl|xxl}-md
/// @group gap-responsive
/// @contextType css

/// This is equivalent to `row-gap: 1rem;`.
/// @example row-gap: 1rem;
/// @name .k-gap-y-{xs|sm|md|lg|xl|xxl}-lg
/// @group gap-responsive
/// @contextType css

/// This is equivalent to `row-gap: 1.5rem;`.
/// @example row-gap: 1.5rem;
/// @name .k-gap-y-{xs|sm|md|lg|xl|xxl}-xl
/// @group gap-responsive
/// @contextType css

/// This is equivalent to `row-gap: 0.125rem;`.
/// @example row-gap: 0.125rem;
/// @name .k-gap-y-{xs|sm|md|lg|xl|xxl}-thin
/// @group gap-responsive
/// @contextType css

/// This is equivalent to `row-gap: 1px;`.
/// @example row-gap: 1px;
/// @name .k-gap-y-{xs|sm|md|lg|xl|xxl}-hair
/// @group gap-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--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 );

}