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

// Transition Utilities
// - .transition: Default transition for common properties
// - .transition-{property}: Transition specific properties
// - .duration-{time}: Set transition duration
// - .ease-{type}: Set transition timing function
// - .delay-{time}: Set transition delay

// Property-specific transition mixins
@mixin transition-none {
    transition-property: none;
}
@mixin transition {
    transition-property: all;
}
@mixin transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
}
@mixin transition-opacity {
    transition-property: opacity;
}
@mixin transition-shadow {
    transition-property: box-shadow;
}
@mixin transition-transform {
    transition-property: transform;
}

// Duration mixins
@mixin duration($time) {
    transition-duration: $time;
}

// Timing function mixins
@mixin ease-linear {
    transition-timing-function: linear;
}
@mixin ease-in {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
@mixin ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
@mixin ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

// Delay mixins
@mixin delay($time) {
    transition-delay: $time;
}

// Timing functions
$timing-functions: (
    "linear": linear,
    "in": cubic-bezier(0.4, 0, 1, 1),
    "out": cubic-bezier(0, 0, 0.2, 1),
    "in-out": cubic-bezier(0.4, 0, 0.2, 1),
);

// Durations
$durations: (
    "0": 0ms,
    "75": 75ms,
    "100": 100ms,
    "150": 150ms,
    "200": 200ms,
    "300": 300ms,
    "500": 500ms,
    "700": 700ms,
    "1000": 1000ms,
);

// Delays
$delays: (
    "0": 0ms,
    "75": 75ms,
    "100": 100ms,
    "150": 150ms,
    "200": 200ms,
    "300": 300ms,
    "500": 500ms,
    "700": 700ms,
    "1000": 1000ms,
);

@if fn-flags.feature-enabled("transitions") {
    // Property-specific transitions
    #{config-flags.$parent-selector} .transition-none {
        @include transition-none;
    }

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

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

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

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

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

    @each $name, $value in $durations {
        #{config-flags.$parent-selector} .duration-#{$name} {
            @include duration($value);
        }
    }

    @each $name, $value in $timing-functions {
        #{config-flags.$parent-selector} .ease-#{$name} {
            transition-timing-function: $value;
        }
    }

    // Specific timing function classes
    #{config-flags.$parent-selector} .ease-linear {
        @include ease-linear;
    }

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

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

    #{config-flags.$parent-selector} .ease-in-out {
        @include ease-in-out;
    }

    @each $name, $value in $delays {
        #{config-flags.$parent-selector} .delay-#{$name} {
            @include delay($value);
        }
    }

    // Responsive variants
    @each $breakpoint, $width in config-breakpoint.$breakpoints {
        @media (min-width: #{$width}) {
            // Base transition
            #{config-flags.$parent-selector} .transition\@#{$breakpoint} {
                @include transition;
            }

            // Property-specific transitions
            #{config-flags.$parent-selector} .transition-none\@#{$breakpoint} {
                @include transition-none;
            }
            #{config-flags.$parent-selector} .transition-colors\@#{$breakpoint} {
                @include transition-colors;
            }
            #{config-flags.$parent-selector} .transition-opacity\@#{$breakpoint} {
                @include transition-opacity;
            }
            #{config-flags.$parent-selector} .transition-shadow\@#{$breakpoint} {
                @include transition-shadow;
            }
            #{config-flags.$parent-selector} .transition-transform\@#{$breakpoint} {
                @include transition-transform;
            }

            // Duration responsive variants
            @each $name, $value in $durations {
                #{config-flags.$parent-selector} .duration-#{$name}\@#{$breakpoint} {
                    @include duration($value);
                }
            }

            // Timing function responsive variants
            #{config-flags.$parent-selector} .ease-linear\@#{$breakpoint} {
                @include ease-linear;
            }
            #{config-flags.$parent-selector} .ease-in\@#{$breakpoint} {
                @include ease-in;
            }
            #{config-flags.$parent-selector} .ease-out\@#{$breakpoint} {
                @include ease-out;
            }
            #{config-flags.$parent-selector} .ease-in-out\@#{$breakpoint} {
                @include ease-in-out;
            }

            // Delay responsive variants
            @each $name, $value in $delays {
                #{config-flags.$parent-selector} .delay-#{$name}\@#{$breakpoint} {
                    @include delay($value);
                }
            }
        }
    }
}