/// Sets column gap to 0 pixels.
/// @example --kendo-col-gap: 0px;
/// @name .k-col-gap-0
/// @group col-gap
/// @contextType css

/// Sets column gap to 1 pixel.
/// @example --kendo-col-gap: 1px;
/// @name .k-col-gap-1px
/// @group col-gap
/// @contextType css

/// Sets column gap to 0.125rem (2px at 16px base).
/// @example --kendo-col-gap: 0.125rem;
/// @name .k-col-gap-0\.5
/// @group col-gap
/// @contextType css

/// Sets column gap to 0.25rem (4px at 16px base).
/// @example --kendo-col-gap: 0.25rem;
/// @name .k-col-gap-1
/// @group col-gap
/// @contextType css

/// Sets column gap to 0.375rem (6px at 16px base).
/// @example --kendo-col-gap: 0.375rem;
/// @name .k-col-gap-1\.5
/// @group col-gap
/// @contextType css

/// Sets column gap to 0.5rem (8px at 16px base).
/// @example --kendo-col-gap: 0.5rem;
/// @name .k-col-gap-2
/// @group col-gap
/// @contextType css

/// Sets column gap to 0.625rem (10px at 16px base).
/// @example --kendo-col-gap: 0.625rem;
/// @name .k-col-gap-2\.5
/// @group col-gap
/// @contextType css

/// Sets column gap to 0.75rem (12px at 16px base).
/// @example --kendo-col-gap: 0.75rem;
/// @name .k-col-gap-3
/// @group col-gap
/// @contextType css

/// Sets column gap to 0.875rem (14px at 16px base).
/// @example --kendo-col-gap: 0.875rem;
/// @name .k-col-gap-3\.5
/// @group col-gap
/// @contextType css

/// Sets column gap to 1rem (16px at 16px base).
/// @example --kendo-col-gap: 1rem;
/// @name .k-col-gap-4
/// @group col-gap
/// @contextType css

/// Sets column gap to 1.125rem (18px at 16px base).
/// @example --kendo-col-gap: 1.125rem;
/// @name .k-col-gap-4\.5
/// @group col-gap
/// @contextType css

/// Sets column gap to 1.25rem (20px at 16px base).
/// @example --kendo-col-gap: 1.25rem;
/// @name .k-col-gap-5
/// @group col-gap
/// @contextType css

/// Sets column gap to 1.375rem (22px at 16px base).
/// @example --kendo-col-gap: 1.375rem;
/// @name .k-col-gap-5\.5
/// @group col-gap
/// @contextType css

/// Sets column gap to 1.5rem (24px at 16px base).
/// @example --kendo-col-gap: 1.5rem;
/// @name .k-col-gap-6
/// @group col-gap
/// @contextType css

/// Sets column gap to 1.625rem (26px at 16px base).
/// @example --kendo-col-gap: 1.625rem;
/// @name .k-col-gap-6\.5
/// @group col-gap
/// @contextType css

/// Sets column gap to 1.75rem (28px at 16px base).
/// @example --kendo-col-gap: 1.75rem;
/// @name .k-col-gap-7
/// @group col-gap
/// @contextType css

/// Sets column gap to 1.875rem (30px at 16px base).
/// @example --kendo-col-gap: 1.875rem;
/// @name .k-col-gap-7\.5
/// @group col-gap
/// @contextType css

/// Sets column gap to 2rem (32px at 16px base).
/// @example --kendo-col-gap: 2rem;
/// @name .k-col-gap-8
/// @group col-gap
/// @contextType css

/// Sets column gap to 2.25rem (36px at 16px base).
/// @example --kendo-col-gap: 2.25rem;
/// @name .k-col-gap-9
/// @group col-gap
/// @contextType css

/// Sets column gap to 2.5rem (40px at 16px base).
/// @example --kendo-col-gap: 2.5rem;
/// @name .k-col-gap-10
/// @group col-gap
/// @contextType css

/// Sets column gap to 2.75rem (44px at 16px base).
/// @example --kendo-col-gap: 2.75rem;
/// @name .k-col-gap-11
/// @group col-gap
/// @contextType css

/// Sets column gap to 3rem (48px at 16px base).
/// @example --kendo-col-gap: 3rem;
/// @name .k-col-gap-12
/// @group col-gap
/// @contextType css

/// Sets column gap to 3.25rem (52px at 16px base).
/// @example --kendo-col-gap: 3.25rem;
/// @name .k-col-gap-13
/// @group col-gap
/// @contextType css

/// Sets column gap to 3.5rem (56px at 16px base).
/// @example --kendo-col-gap: 3.5rem;
/// @name .k-col-gap-14
/// @group col-gap
/// @contextType css

/// Sets column gap to 3.75rem (60px at 16px base).
/// @example --kendo-col-gap: 3.75rem;
/// @name .k-col-gap-15
/// @group col-gap
/// @contextType css

/// Sets column gap to 4rem (64px at 16px base).
/// @example --kendo-col-gap: 4rem;
/// @name .k-col-gap-16
/// @group col-gap
/// @contextType css

/// Sets column gap to 4.25rem (68px at 16px base).
/// @example --kendo-col-gap: 4.25rem;
/// @name .k-col-gap-17
/// @group col-gap
/// @contextType css

/// Sets column gap to 4.5rem (72px at 16px base).
/// @example --kendo-col-gap: 4.5rem;
/// @name .k-col-gap-18
/// @group col-gap
/// @contextType css

/// Sets column gap to 4.75rem (76px at 16px base).
/// @example --kendo-col-gap: 4.75rem;
/// @name .k-col-gap-19
/// @group col-gap
/// @contextType css

/// Sets column gap to 5rem (80px at 16px base).
/// @example --kendo-col-gap: 5rem;
/// @name .k-col-gap-20
/// @group col-gap
/// @contextType css

/// Sets column gap to 5.25rem (84px at 16px base).
/// @example --kendo-col-gap: 5.25rem;
/// @name .k-col-gap-21
/// @group col-gap
/// @contextType css

/// Sets column gap to 5.5rem (88px at 16px base).
/// @example --kendo-col-gap: 5.5rem;
/// @name .k-col-gap-22
/// @group col-gap
/// @contextType css

/// Sets column gap to 5.75rem (92px at 16px base).
/// @example --kendo-col-gap: 5.75rem;
/// @name .k-col-gap-23
/// @group col-gap
/// @contextType css

/// Sets column gap to 6rem (96px at 16px base).
/// @example --kendo-col-gap: 6rem;
/// @name .k-col-gap-24
/// @group col-gap
/// @contextType css

/// Sets column gap to 7rem (112px at 16px base).
/// @example --kendo-col-gap: 7rem;
/// @name .k-col-gap-25
/// @group col-gap
/// @contextType css

/// Sets column gap to 8rem (128px at 16px base).
/// @example --kendo-col-gap: 8rem;
/// @name .k-col-gap-26
/// @group col-gap
/// @contextType css

/// Sets column gap to 9rem (144px at 16px base).
/// @example --kendo-col-gap: 9rem;
/// @name .k-col-gap-27
/// @group col-gap
/// @contextType css

/// Sets column gap to 10rem (160px at 16px base).
/// @example --kendo-col-gap: 10rem;
/// @name .k-col-gap-28
/// @group col-gap
/// @contextType css

/// Sets column gap to 11rem (176px at 16px base).
/// @example --kendo-col-gap: 11rem;
/// @name .k-col-gap-29
/// @group col-gap
/// @contextType css

/// Sets column gap to 12rem (192px at 16px base).
/// @example --kendo-col-gap: 12rem;
/// @name .k-col-gap-30
/// @group col-gap
/// @contextType css

/// Sets column gap to extra small spacing.
/// @example --kendo-col-gap: var(--kendo-spacing-1, 0.25rem);
/// @name .k-col-gap-xs
/// @group col-gap
/// @contextType css

/// Sets column gap to small spacing.
/// @example --kendo-col-gap: var(--kendo-spacing-2, 0.5rem);
/// @name .k-col-gap-sm
/// @group col-gap
/// @contextType css

/// Sets column gap to medium spacing.
/// @example --kendo-col-gap: var(--kendo-spacing-3, 0.75rem);
/// @name .k-col-gap-md
/// @group col-gap
/// @contextType css

/// Sets column gap to large spacing.
/// @example --kendo-col-gap: var(--kendo-spacing-4, 1rem);
/// @name .k-col-gap-lg
/// @group col-gap
/// @contextType css

/// Sets column gap to extra large spacing.
/// @example --kendo-col-gap: var(--kendo-spacing-6, 1.5rem);
/// @name .k-col-gap-xl
/// @group col-gap
/// @contextType css

/// Sets column gap to thin spacing.
/// @example --kendo-col-gap: var(--kendo-spacing-0\.5, 0.125rem);
/// @name .k-col-gap-thin
/// @group col-gap
/// @contextType css

/// Sets column gap to hair spacing.
/// @example --kendo-col-gap: var(--kendo-spacing-1px, 1px);
/// @name .k-col-gap-hair
/// @group col-gap
/// @contextType css

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

/// Sets column gap to 0 pixels.
/// @example --kendo-col-gap: 0px;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-0
/// @group col-gap
/// @contextType css

/// Sets column gap to 1 pixel.
/// @example --kendo-col-gap: 1px;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-1px
/// @group col-gap
/// @contextType css

/// Sets column gap to 0.125rem (2px at 16px base).
/// @example --kendo-col-gap: 0.125rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-0\.5
/// @group col-gap
/// @contextType css

/// Sets column gap to 0.25rem (4px at 16px base).
/// @example --kendo-col-gap: 0.25rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-1
/// @group col-gap
/// @contextType css

/// Sets column gap to 0.375rem (6px at 16px base).
/// @example --kendo-col-gap: 0.375rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-1\.5
/// @group col-gap
/// @contextType css

/// Sets column gap to 0.5rem (8px at 16px base).
/// @example --kendo-col-gap: 0.5rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-2
/// @group col-gap
/// @contextType css

/// Sets column gap to 0.625rem (10px at 16px base).
/// @example --kendo-col-gap: 0.625rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-2\.5
/// @group col-gap
/// @contextType css

/// Sets column gap to 0.75rem (12px at 16px base).
/// @example --kendo-col-gap: 0.75rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-3
/// @group col-gap
/// @contextType css

/// Sets column gap to 0.875rem (14px at 16px base).
/// @example --kendo-col-gap: 0.875rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-3\.5
/// @group col-gap
/// @contextType css

/// Sets column gap to 1rem (16px at 16px base).
/// @example --kendo-col-gap: 1rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-4
/// @group col-gap
/// @contextType css

/// Sets column gap to 1.125rem (18px at 16px base).
/// @example --kendo-col-gap: 1.125rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-4\.5
/// @group col-gap
/// @contextType css

/// Sets column gap to 1.25rem (20px at 16px base).
/// @example --kendo-col-gap: 1.25rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-5
/// @group col-gap
/// @contextType css

/// Sets column gap to 1.375rem (22px at 16px base).
/// @example --kendo-col-gap: 1.375rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-5\.5
/// @group col-gap
/// @contextType css

/// Sets column gap to 1.5rem (24px at 16px base).
/// @example --kendo-col-gap: 1.5rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-6
/// @group col-gap
/// @contextType css

/// Sets column gap to 1.625rem (26px at 16px base).
/// @example --kendo-col-gap: 1.625rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-6\.5
/// @group col-gap
/// @contextType css

/// Sets column gap to 1.75rem (28px at 16px base).
/// @example --kendo-col-gap: 1.75rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-7
/// @group col-gap
/// @contextType css

/// Sets column gap to 1.875rem (30px at 16px base).
/// @example --kendo-col-gap: 1.875rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-7\.5
/// @group col-gap
/// @contextType css

/// Sets column gap to 2rem (32px at 16px base).
/// @example --kendo-col-gap: 2rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-8
/// @group col-gap
/// @contextType css

/// Sets column gap to 2.25rem (36px at 16px base).
/// @example --kendo-col-gap: 2.25rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-9
/// @group col-gap
/// @contextType css

/// Sets column gap to 2.5rem (40px at 16px base).
/// @example --kendo-col-gap: 2.5rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-10
/// @group col-gap
/// @contextType css

/// Sets column gap to 2.75rem (44px at 16px base).
/// @example --kendo-col-gap: 2.75rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-11
/// @group col-gap
/// @contextType css

/// Sets column gap to 3rem (48px at 16px base).
/// @example --kendo-col-gap: 3rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-12
/// @group col-gap
/// @contextType css

/// Sets column gap to 3.25rem (52px at 16px base).
/// @example --kendo-col-gap: 3.25rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-13
/// @group col-gap
/// @contextType css

/// Sets column gap to 3.5rem (56px at 16px base).
/// @example --kendo-col-gap: 3.5rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-14
/// @group col-gap
/// @contextType css

/// Sets column gap to 3.75rem (60px at 16px base).
/// @example --kendo-col-gap: 3.75rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-15
/// @group col-gap
/// @contextType css

/// Sets column gap to 4rem (64px at 16px base).
/// @example --kendo-col-gap: 4rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-16
/// @group col-gap
/// @contextType css

/// Sets column gap to 4.25rem (68px at 16px base).
/// @example --kendo-col-gap: 4.25rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-17
/// @group col-gap
/// @contextType css

/// Sets column gap to 4.5rem (72px at 16px base).
/// @example --kendo-col-gap: 4.5rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-18
/// @group col-gap
/// @contextType css

/// Sets column gap to 4.75rem (76px at 16px base).
/// @example --kendo-col-gap: 4.75rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-19
/// @group col-gap
/// @contextType css

/// Sets column gap to 5rem (80px at 16px base).
/// @example --kendo-col-gap: 5rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-20
/// @group col-gap
/// @contextType css

/// Sets column gap to 5.25rem (84px at 16px base).
/// @example --kendo-col-gap: 5.25rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-21
/// @group col-gap
/// @contextType css

/// Sets column gap to 5.5rem (88px at 16px base).
/// @example --kendo-col-gap: 5.5rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-22
/// @group col-gap
/// @contextType css

/// Sets column gap to 5.75rem (92px at 16px base).
/// @example --kendo-col-gap: 5.75rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-23
/// @group col-gap
/// @contextType css

/// Sets column gap to 6rem (96px at 16px base).
/// @example --kendo-col-gap: 6rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-24
/// @group col-gap
/// @contextType css

/// Sets column gap to 7rem (112px at 16px base).
/// @example --kendo-col-gap: 7rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-25
/// @group col-gap
/// @contextType css

/// Sets column gap to 8rem (128px at 16px base).
/// @example --kendo-col-gap: 8rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-26
/// @group col-gap
/// @contextType css

/// Sets column gap to 9rem (144px at 16px base).
/// @example --kendo-col-gap: 9rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-27
/// @group col-gap
/// @contextType css

/// Sets column gap to 10rem (160px at 16px base).
/// @example --kendo-col-gap: 10rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-28
/// @group col-gap
/// @contextType css

/// Sets column gap to 11rem (176px at 16px base).
/// @example --kendo-col-gap: 11rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-29
/// @group col-gap
/// @contextType css

/// Sets column gap to 12rem (192px at 16px base).
/// @example --kendo-col-gap: 12rem;
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-30
/// @group col-gap
/// @contextType css

/// Sets column gap to extra small spacing.
/// @example --kendo-col-gap: var(--kendo-spacing-1, 0.25rem);
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-xs
/// @group col-gap
/// @contextType css

/// Sets column gap to small spacing.
/// @example --kendo-col-gap: var(--kendo-spacing-2, 0.5rem);
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-sm
/// @group col-gap
/// @contextType css

/// Sets column gap to medium spacing.
/// @example --kendo-col-gap: var(--kendo-spacing-3, 0.75rem);
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-md
/// @group col-gap
/// @contextType css

/// Sets column gap to large spacing.
/// @example --kendo-col-gap: var(--kendo-spacing-4, 1rem);
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-lg
/// @group col-gap
/// @contextType css

/// Sets column gap to extra large spacing.
/// @example --kendo-col-gap: var(--kendo-spacing-6, 1.5rem);
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-xl
/// @group col-gap
/// @contextType css

/// Sets column gap to thin spacing.
/// @example --kendo-col-gap: var(--kendo-spacing-0\.5, 0.125rem);
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-thin
/// @group col-gap
/// @contextType css

/// Sets column gap to hair spacing.
/// @example --kendo-col-gap: var(--kendo-spacing-1px, 1px);
/// @name .k-col-gap-{xs|sm|md|lg|xl|xxl}-hair
/// @group col-gap
/// @contextType css

@use "../_globals.scss" as *;
@use "@progress/kendo-theme-core/scss/functions/index.scss" as *;
@use "sass:map";

@mixin kendo-utils--responsive-layout--col-gap() {

    // Columns gap
    $kendo-utils-col-gap: map.get( $kendo-utils, "gap" ) !default;

    @each $key, $val in $kendo-utils-col-gap {
        $_key: k-escape-class-name( $key );
        .k-col-gap-#{$_key} {
            --kendo-col-gap: #{$val};
        }
    }

}

@mixin kendo-utils--responsive-layout--col-gap--responsive($breakpoint) {

    // Columns gap responsive
    $kendo-utils-col-gap: map.get( $kendo-utils, "gap" ) !default;

    @each $key, $val in $kendo-utils-col-gap {
        $_key: k-escape-class-name( $key );
        .k-col-gap-#{$breakpoint}-#{$_key} {
            --kendo-col-gap: #{$val};
        }
    }
}