// Section: Utilities
// Module: Display

@use "../config/feature-flags" as config-flags;
@use "../config/breakpoints" as config-breakpoint;
@use "../functions/feature-flags" as fn-flags;

// Display Utilities
// Classes:
//  - .hide, .show: Control element visibility
//  - .block, .inline, .inline-block: Basic display modes
//  - .table, .table-row, .table-cell: Table display modes
//  - .overflow-hidden: Control overflow behavior
// All utilities support responsive variants with @breakpoint suffix:
//  - .hide@md, .block@lg, etc.

// Display Mixins

// @description Set display to none.
@mixin hide {
    display: none;
}

// @description Set display to block.
@mixin block {
    display: block;
}

// @description Set display to inline.
@mixin inline {
    display: inline;
}

// @description Set display to inline-block.
@mixin inline-block {
    display: inline-block;
}

// @description Set display to initial original state.
@mixin show {
    display: initial;
}

// @description Establishes a grid container.
@mixin grid {
    display: grid;
}

// @description Establishes an inline-grid container.
@mixin inline-grid {
    display: inline-grid;
}

// @deprecated Use `inline-grid` instead. Removal in v2.0.
@mixin grid-inline {
    @warn "grid-inline is deprecated. Use inline-grid instead. Removal in v2.0.";
    @include inline-grid;
}

// @description Establishes a flex container.
@mixin flex {
    display: flex;
}

// @description Establishes an inline-flex container.
@mixin inline-flex {
    display: inline-flex;
}

// @deprecated Use `inline-flex` instead. Removal in v2.0.
@mixin flex-inline {
    @warn "flex-inline is deprecated. Use inline-flex instead. Removal in v2.0.";
    @include inline-flex;
}

// @description Set display to table.
@mixin table {
    display: table;
}

// @deprecated Use `table` instead. Removal in v2.0.
@mixin d-tbl {
    @warn "d-tbl is deprecated. Use table instead. Removal in v2.0.";
    @include table;
}

// @description Set display to table-row.
@mixin table-row {
    display: table-row;
}

// @deprecated Use `table-row` instead. Removal in v2.0.
@mixin d-tbl-row {
    @warn "d-tbl-row is deprecated. Use table-row instead. Removal in v2.0.";
    @include table-row;
}

// @description Set display to table-cell.
@mixin table-cell {
    display: table-cell;
}

// @deprecated Use `table-cell` instead. Removal in v2.0.
@mixin d-tbl-cell {
    @warn "d-tbl-cell is deprecated. Use table-cell instead. Removal in v2.0.";
    @include table-cell;
}

@mixin visible {
    visibility: visible;
}
@mixin invisible {
    visibility: hidden;
}
@mixin collapse {
    visibility: collapse;
}
@mixin contents {
    display: contents;
}

@mixin overflow-hidden {
    overflow: hidden;
}
@mixin overflow-visible {
    overflow: visible;
}
@mixin overflow-scroll {
    overflow: scroll;
}
@mixin overflow-auto {
    overflow: auto;
}
@mixin overflow-x-hidden {
    overflow-x: hidden;
}
@mixin overflow-y-hidden {
    overflow-y: hidden;
}
@mixin overflow-x-scroll {
    overflow-x: scroll;
}
@mixin overflow-y-scroll {
    overflow-y: scroll;
}
@mixin overflow-x-auto {
    overflow-x: auto;
}
@mixin overflow-y-auto {
    overflow-y: auto;
}

@if fn-flags.feature-enabled("displays") {
    #{config-flags.$parent-selector} .show {
        @include show;
    }

    #{config-flags.$parent-selector} .block {
        @include block;
    }

    #{config-flags.$parent-selector} .inline {
        @include inline;
    }

    #{config-flags.$parent-selector} .inline-block {
        @include inline-block;
    }

    #{config-flags.$parent-selector} .contents {
        @include contents;
    }

    #{config-flags.$parent-selector} .grid {
        @include grid;

        &.inline {
            @include inline-grid;
        }
    }
    #{config-flags.$parent-selector} .flex {
        @include flex;

        &.inline {
            @include inline-flex;
        }
    }
    #{config-flags.$parent-selector} .visible {
        @include visible;
    }

    #{config-flags.$parent-selector} .invisible {
        @include invisible;
    }

    #{config-flags.$parent-selector} .collapse {
        @include collapse;
    }

    #{config-flags.$parent-selector} .hide {
        @include hide;
    }

    #{config-flags.$parent-selector} .hidden {
        display: none !important;
    }

    #{config-flags.$parent-selector} .overflow-hidden {
        @include overflow-hidden;
    }

    #{config-flags.$parent-selector} .overflow-visible {
        @include overflow-visible;
    }

    #{config-flags.$parent-selector} .overflow-scroll {
        @include overflow-scroll;
    }

    #{config-flags.$parent-selector} .overflow-auto {
        @include overflow-auto;
    }

    #{config-flags.$parent-selector} .overflow-x-hidden {
        @include overflow-x-hidden;
    }

    #{config-flags.$parent-selector} .overflow-y-hidden {
        @include overflow-y-hidden;
    }

    #{config-flags.$parent-selector} .overflow-x-scroll {
        @include overflow-x-scroll;
    }

    #{config-flags.$parent-selector} .overflow-y-scroll {
        @include overflow-y-scroll;
    }

    #{config-flags.$parent-selector} .overflow-x-auto {
        @include overflow-x-auto;
    }

    #{config-flags.$parent-selector} .overflow-y-auto {
        @include overflow-y-auto;
    }

    #{config-flags.$parent-selector} .table {
        @include table;
    }

    #{config-flags.$parent-selector} .table-row {
        @include table-row;
    }

    #{config-flags.$parent-selector} .table-cell {
        @include table-cell;
    }

    // Responsive Variants
    @each $breakpoint, $width in config-breakpoint.$breakpoints {
        @media (min-width: #{$width}) {
            #{config-flags.$parent-selector} .hide\@#{$breakpoint} {
                @include hide;
            }
            #{config-flags.$parent-selector} .show\@#{$breakpoint} {
                @include show;
            }
            #{config-flags.$parent-selector} .block\@#{$breakpoint} {
                @include block;
            }
            #{config-flags.$parent-selector} .inline\@#{$breakpoint} {
                @include inline;
            }
            #{config-flags.$parent-selector} .inline-block\@#{$breakpoint} {
                @include inline-block;
            }

            #{config-flags.$parent-selector} .contents\@#{$breakpoint} {
                @include contents;
            }
            #{config-flags.$parent-selector} .grid\@#{$breakpoint} {
                @include grid;

                &.inline {
                    @include inline-grid;
                }
            }
            #{config-flags.$parent-selector} .flex\@#{$breakpoint} {
                @include flex;

                &.inline {
                    @include inline-flex;
                }
            }
            #{config-flags.$parent-selector} .visible\@#{$breakpoint} {
                @include visible;
            }
            #{config-flags.$parent-selector} .invisible\@#{$breakpoint} {
                @include invisible;
            }
            #{config-flags.$parent-selector} .collapse\@#{$breakpoint} {
                @include collapse;
            }
            #{config-flags.$parent-selector} .overflow-hidden\@#{$breakpoint} {
                @include overflow-hidden;
            }
            #{config-flags.$parent-selector} .overflow-visible\@#{$breakpoint} {
                @include overflow-visible;
            }
            #{config-flags.$parent-selector} .overflow-scroll\@#{$breakpoint} {
                @include overflow-scroll;
            }
            #{config-flags.$parent-selector} .overflow-auto\@#{$breakpoint} {
                @include overflow-auto;
            }
            #{config-flags.$parent-selector} .overflow-x-hidden\@#{$breakpoint} {
                @include overflow-x-hidden;
            }
            #{config-flags.$parent-selector} .overflow-y-hidden\@#{$breakpoint} {
                @include overflow-y-hidden;
            }
            #{config-flags.$parent-selector} .overflow-x-scroll\@#{$breakpoint} {
                @include overflow-x-scroll;
            }
            #{config-flags.$parent-selector} .overflow-y-scroll\@#{$breakpoint} {
                @include overflow-y-scroll;
            }
            #{config-flags.$parent-selector} .overflow-x-auto\@#{$breakpoint} {
                @include overflow-x-auto;
            }
            #{config-flags.$parent-selector} .overflow-y-auto\@#{$breakpoint} {
                @include overflow-y-auto;
            }

            #{config-flags.$parent-selector} .table\@#{$breakpoint} {
                @include table;
            }
            #{config-flags.$parent-selector} .table-row\@#{$breakpoint} {
                @include table-row;
            }
            #{config-flags.$parent-selector} .table-cell\@#{$breakpoint} {
                @include table-cell;
            }
        }
    }
}