/// This is equivalent to `display: none;`.
/// @example display: none;
/// @name .k-d-none
/// @group display
/// @contextType css

/// This is equivalent to `display: contents;`.
/// @example display: contents;
/// @name .k-d-contents
/// @group display
/// @contextType css

/// This is equivalent to `display: block;`.
/// @example display: block;
/// @name .k-d-block
/// @group display
/// @contextType css

/// This is equivalent to `display: inline;`.
/// @example display: inline;
/// @name .k-d-inline
/// @group display
/// @contextType css

/// This is equivalent to `display: inline-block;`.
/// @example display: inline-block;
/// @name .k-d-inline-block
/// @group display
/// @contextType css

/// This is equivalent to `display: flex;`.
/// @example display: flex;
/// @name .k-d-flex
/// @group display
/// @contextType css

/// This is equivalent to `display: inline-flex;`.
/// @example display: inline-flex;
/// @name .k-d-inline-flex
/// @group display
/// @contextType css

/// This is equivalent to `display: grid`. It defines the element as a grid container and establishes a new grid formatting context for its contents.
/// @example display: grid
/// @name .k-d-grid
/// @group display
/// @contextType css

/// This is equivalent to `display: inline-grid`. It defines the element as a grid container and establishes a new grid formatting context for its contents.
/// @example display: inline-grid
/// @name .k-d-inline-grid
/// @group display
/// @contextType css

/// This is equivalent to `display: table;`.
/// @example display: table;
/// @name .k-d-table
/// @group display
/// @contextType css

/// This is equivalent to `display: inline-table;`.
/// @example display: inline-table;
/// @name .k-d-inline-table
/// @group display
/// @contextType css

/// This is equivalent to `display: list-item;`.
/// @example display: list-item;
/// @name .k-d-list-item
/// @group display
/// @contextType css

/// This is equivalent to `display: table-row;`.
/// @example display: table-row;
/// @name .k-d-table-row
/// @group display
/// @contextType css

/// This is equivalent to `display: table-cell;`.
/// @example display: table-cell;
/// @name .k-d-table-cell
/// @group display
/// @contextType css

// ============================================================================
// Responsive Display Utilities
// ============================================================================

/// This is equivalent to `display: none;`.
/// @example display: none;
/// @name .k-d-{xs|md|lg|xl|xxl}-none
/// @group display-responsive
/// @contextType css

/// This is equivalent to `display: contents;`.
/// @example display: contents;
/// @name .k-d-{xs|md|lg|xl|xxl}-contents
/// @group display-responsive
/// @contextType css

/// This is equivalent to `display: block;`.
/// @example display: block;
/// @name .k-d-{xs|md|lg|xl|xxl}-block
/// @group display-responsive
/// @contextType css

/// This is equivalent to `display: inline;`.
/// @example display: inline;
/// @name .k-d-{xs|md|lg|xl|xxl}-inline
/// @group display-responsive
/// @contextType css

/// This is equivalent to `display: inline-block;`.
/// @example display: inline-block;
/// @name .k-d-{xs|md|lg|xl|xxl}-inline-block
/// @group display-responsive
/// @contextType css

/// This is equivalent to `display: flex;`.
/// @example display: flex;
/// @name .k-d-{xs|md|lg|xl|xxl}-flex
/// @group display-responsive
/// @contextType css

/// This is equivalent to `display: inline-flex;`.
/// @example display: inline-flex;
/// @name .k-d-{xs|md|lg|xl|xxl}-inline-flex
/// @group display-responsive
/// @contextType css

/// This is equivalent to `display: grid`. It defines the element as a grid container and establishes a new grid formatting context for its contents.
/// @example display: grid
/// @name .k-d-{xs|md|lg|xl|xxl}-grid
/// @group display-responsive
/// @contextType css

/// This is equivalent to `display: inline-grid`. It defines the element as a grid container and establishes a new grid formatting context for its contents.
/// @example display: inline-grid
/// @name .k-d-{xs|md|lg|xl|xxl}-inline-grid
/// @group display-responsive
/// @contextType css

/// This is equivalent to `display: table;`.
/// @example display: table;
/// @name .k-d-{xs|md|lg|xl|xxl}-table
/// @group display-responsive
/// @contextType css

/// This is equivalent to `display: inline-table;`.
/// @example display: inline-table;
/// @name .k-d-{xs|md|lg|xl|xxl}-inline-table
/// @group display-responsive
/// @contextType css

/// This is equivalent to `display: list-item;`.
/// @example display: list-item;
/// @name .k-d-{xs|md|lg|xl|xxl}-list-item
/// @group display-responsive
/// @contextType css

/// This is equivalent to `display: table-row;`.
/// @example display: table-row;
/// @name .k-d-{xs|md|lg|xl|xxl}-table-row
/// @group display-responsive
/// @contextType css

/// This is equivalent to `display: table-cell;`.
/// @example display: table-cell;
/// @name .k-d-{xs|md|lg|xl|xxl}-table-cell
/// @group display-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--layout--display() {
    @include import-once("utils-layout-display") {

        // Display utility classes
        $kendo-utils-display: map.get( $kendo-utils, "display" ) !default;
        @include generate-utils( d, display, $kendo-utils-display );


        // Legacy aliases
        @include generate-utils( display, display, $kendo-utils-display );
        .#{$kendo-prefix}d-flex-row { @extend .#{$kendo-prefix}d-flex, .#{$kendo-prefix}flex-row !optional; }
        .\!#{$kendo-prefix}d-flex-row { @extend .\!#{$kendo-prefix}d-flex, .\!#{$kendo-prefix}flex-row !optional; }
        .#{$kendo-prefix}d-flex-col { @extend .#{$kendo-prefix}d-flex, .#{$kendo-prefix}flex-col !optional; }
        .\!#{$kendo-prefix}d-flex-col { @extend .\!#{$kendo-prefix}d-flex, .\!#{$kendo-prefix}flex-row !optional; }

    }
}

@mixin kendo-utils--layout--display--responsive($key) {

    // Display responsive utility classes
    $kendo-utils-display: map.get( $kendo-utils, "display" ) !default;
    @include generate-utils( d-#{$key}, display, $kendo-utils-display, $important: false );

}