pui

:root {
    --radius: 0.625rem;
    --background: oklch(1 0 0);
    --foreground: oklch(0.145 0 0);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.145 0 0);
    --primary: oklch(0.205 0 0);
    --primary-foreground: oklch(0.985 0 0);
    --secondary: oklch(0.97 0 0);
    --secondary-foreground: oklch(0.205 0 0);
    --muted: oklch(0.97 0 0);
    --muted-foreground: oklch(0.556 0 0);
    --accent: oklch(0.97 0 0);
    --accent-foreground: oklch(0.205 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --border: oklch(0.922 0 0);
    --input: oklch(0.922 0 0);
    --ring: oklch(0.708 0 0);
    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
    --chart-3: oklch(0.398 0.07 227.392);
    --chart-4: oklch(0.828 0.189 84.429);
    --chart-5: oklch(0.769 0.188 70.08);
    --sidebar: oklch(0.985 0 0);
    --sidebar-foreground: oklch(0.145 0 0);
    --sidebar-primary: oklch(0.205 0 0);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.97 0 0);
    --sidebar-accent-foreground: oklch(0.205 0 0);
    --sidebar-border: oklch(0.922 0 0);
    --sidebar-ring: oklch(0.708 0 0);
}

.dark,
[data-theme="dark"] {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.205 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.269 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.922 0 0);
    --primary-foreground: oklch(0.205 0 0);
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.371 0 0);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.704 0.191 22.216);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.556 0 0);
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
    --sidebar: oklch(0.205 0 0);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.488 0.243 264.376);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.269 0 0);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.439 0 0);
}

@layer base {
    * {
        @apply border-border outline-ring/50;
    }
    body {
        @apply bg-background text-foreground;
    }
}

@theme inline {
    --breakpoint-3xl: 1600px;
    --breakpoint-4xl: 2000px;
    --font-sans: var(--font-sans);
    --font-mono: var(--font-mono);
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);
    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);
    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);
    --color-destructive: var(--destructive);
    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);
    --color-chart-1: var(--chart-1);
    --color-chart-2: var(--chart-2);
    --color-chart-3: var(--chart-3);
    --color-chart-4: var(--chart-4);
    --color-chart-5: var(--chart-5);
    --color-sidebar: var(--sidebar);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar-primary: var(--sidebar-primary);
    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-ring: var(--sidebar-ring);
    --color-surface: var(--surface);
    --color-surface-foreground: var(--surface-foreground);
    --color-code: var(--code);
    --color-code-foreground: var(--code-foreground);
    --color-code-highlight: var(--code-highlight);
    --color-code-number: var(--code-number);
    --color-selection: var(--selection);
    --color-selection-foreground: var(--selection-foreground);
}

:root {
    /* @property declarations for animation variables, to prevent inheritance */
    @property --tw-animation-delay {
        syntax: "*";
        inherits: false;
        initial-value: 0s;
    }

    @property --tw-animation-direction {
        syntax: "*";
        inherits: false;
        initial-value: normal;
    }

    @property --tw-animation-duration {
        syntax: "*";
        inherits: false;
        /* does not have an initial value in order for the `--tw-duration` variable to work */
    }

    @property --tw-animation-fill-mode {
        syntax: "*";
        inherits: false;
        initial-value: none;
    }

    @property --tw-animation-iteration-count {
        syntax: "*";
        inherits: false;
        initial-value: 1;
    }

    @property --tw-enter-blur {
        syntax: "*";
        inherits: false;
        initial-value: 0;
    }

    @property --tw-enter-opacity {
        syntax: "*";
        inherits: false;
        initial-value: 1;
    }

    @property --tw-enter-rotate {
        syntax: "*";
        inherits: false;
        initial-value: 0;
    }

    @property --tw-enter-scale {
        syntax: "*";
        inherits: false;
        initial-value: 1;
    }

    @property --tw-enter-translate-x {
        syntax: "*";
        inherits: false;
        initial-value: 0;
    }

    @property --tw-enter-translate-y {
        syntax: "*";
        inherits: false;
        initial-value: 0;
    }

    @property --tw-exit-blur {
        syntax: "*";
        inherits: false;
        initial-value: 0;
    }

    @property --tw-exit-opacity {
        syntax: "*";
        inherits: false;
        initial-value: 1;
    }

    @property --tw-exit-rotate {
        syntax: "*";
        inherits: false;
        initial-value: 0;
    }

    @property --tw-exit-scale {
        syntax: "*";
        inherits: false;
        initial-value: 1;
    }

    @property --tw-exit-translate-x {
        syntax: "*";
        inherits: false;
        initial-value: 0;
    }

    @property --tw-exit-translate-y {
        syntax: "*";
        inherits: false;
        initial-value: 0;
    }
}

@theme inline {
    /* Predefined values */

    --animation-delay-0: 0s;
    --animation-delay-75: 75ms;
    --animation-delay-100: 0.1s;
    --animation-delay-150: 0.15s;
    --animation-delay-200: 0.2s;
    --animation-delay-300: 0.3s;
    --animation-delay-500: 0.5s;
    --animation-delay-700: 0.7s;
    --animation-delay-1000: 1s;

    --animation-repeat-0: 0;
    --animation-repeat-1: 1;
    --animation-repeat-infinite: infinite;

    --animation-direction-normal: normal;
    --animation-direction-reverse: reverse;
    --animation-direction-alternate: alternate;
    --animation-direction-alternate-reverse: alternate-reverse;

    --animation-fill-mode-none: none;
    --animation-fill-mode-forwards: forwards;
    --animation-fill-mode-backwards: backwards;
    --animation-fill-mode-both: both;

    --percentage-0: 0;
    --percentage-5: 0.05;
    --percentage-10: 0.1;
    --percentage-15: 0.15;
    --percentage-20: 0.2;
    --percentage-25: 0.25;
    --percentage-30: 0.3;
    --percentage-35: 0.35;
    --percentage-40: 0.4;
    --percentage-45: 0.45;
    --percentage-50: 0.5;
    --percentage-55: 0.55;
    --percentage-60: 0.6;
    --percentage-65: 0.65;
    --percentage-70: 0.7;
    --percentage-75: 0.75;
    --percentage-80: 0.8;
    --percentage-85: 0.85;
    --percentage-90: 0.9;
    --percentage-95: 0.95;
    --percentage-100: 1;
    --percentage-translate-full: 1;

    /* Animations and keyframes */

    --animate-in: enter var(--tw-animation-duration, var(--tw-duration, 150ms))
        var(--tw-ease, ease) var(--tw-animation-delay, 0s)
        var(--tw-animation-iteration-count, 1)
        var(--tw-animation-direction, normal)
        var(--tw-animation-fill-mode, none);
    --animate-out: exit var(--tw-animation-duration, var(--tw-duration, 150ms))
        var(--tw-ease, ease) var(--tw-animation-delay, 0s)
        var(--tw-animation-iteration-count, 1)
        var(--tw-animation-direction, normal)
        var(--tw-animation-fill-mode, none);

    @keyframes enter {
        from {
            opacity: var(--tw-enter-opacity, 1);
            transform: translate3d(
                    var(--tw-enter-translate-x, 0),
                    var(--tw-enter-translate-y, 0),
                    0
                )
                scale3d(
                    var(--tw-enter-scale, 1),
                    var(--tw-enter-scale, 1),
                    var(--tw-enter-scale, 1)
                )
                rotate(var(--tw-enter-rotate, 0));
            filter: blur(var(--tw-enter-blur, 0));
        }
    }

    @keyframes exit {
        to {
            opacity: var(--tw-exit-opacity, 1);
            transform: translate3d(
                    var(--tw-exit-translate-x, 0),
                    var(--tw-exit-translate-y, 0),
                    0
                )
                scale3d(
                    var(--tw-exit-scale, 1),
                    var(--tw-exit-scale, 1),
                    var(--tw-exit-scale, 1)
                )
                rotate(var(--tw-exit-rotate, 0));
            filter: blur(var(--tw-exit-blur, 0));
        }
    }

    --animate-accordion-down: accordion-down
        var(--tw-animation-duration, var(--tw-duration, 200ms))
        var(--tw-ease, ease-out) var(--tw-animation-delay, 0s)
        var(--tw-animation-iteration-count, 1)
        var(--tw-animation-direction, normal)
        var(--tw-animation-fill-mode, none);
    --animate-accordion-up: accordion-up
        var(--tw-animation-duration, var(--tw-duration, 200ms))
        var(--tw-ease, ease-out) var(--tw-animation-delay, 0s)
        var(--tw-animation-iteration-count, 1)
        var(--tw-animation-direction, normal)
        var(--tw-animation-fill-mode, none);
    --animate-collapsible-down: collapsible-down
        var(--tw-animation-duration, var(--tw-duration, 200ms))
        var(--tw-ease, ease-out) var(--tw-animation-delay, 0s)
        var(--tw-animation-iteration-count, 1)
        var(--tw-animation-direction, normal)
        var(--tw-animation-fill-mode, none);
    --animate-collapsible-up: collapsible-up
        var(--tw-animation-duration, var(--tw-duration, 200ms))
        var(--tw-ease, ease-out) var(--tw-animation-delay, 0s)
        var(--tw-animation-iteration-count, 1)
        var(--tw-animation-direction, normal)
        var(--tw-animation-fill-mode, none);

    @keyframes accordion-down {
        from {
            height: 0;
        }
        to {
            height: var(
                --radix-accordion-content-height,
                var(
                    --bits-accordion-content-height,
                    var(
                        --reka-accordion-content-height,
                        var(
                            --kb-accordion-content-height,
                            var(--ngp-accordion-content-height, auto)
                        )
                    )
                )
            );
        }
    }

    @keyframes accordion-up {
        from {
            height: var(
                --radix-accordion-content-height,
                var(
                    --bits-accordion-content-height,
                    var(
                        --reka-accordion-content-height,
                        var(
                            --kb-accordion-content-height,
                            var(--ngp-accordion-content-height, auto)
                        )
                    )
                )
            );
        }
        to {
            height: 0;
        }
    }

    @keyframes collapsible-down {
        from {
            height: 0;
        }
        to {
            height: var(
                --radix-collapsible-content-height,
                var(
                    --bits-collapsible-content-height,
                    var(
                        --reka-collapsible-content-height,
                        var(--kb-collapsible-content-height, auto)
                    )
                )
            );
        }
    }

    @keyframes collapsible-up {
        from {
            height: var(
                --radix-collapsible-content-height,
                var(
                    --bits-collapsible-content-height,
                    var(
                        --reka-collapsible-content-height,
                        var(--kb-collapsible-content-height, auto)
                    )
                )
            );
        }
        to {
            height: 0;
        }
    }

    --animate-caret-blink: caret-blink 1.25s ease-out infinite;

    @keyframes caret-blink {
        0%,
        70%,
        100% {
            opacity: 1;
        }
        20%,
        50% {
            opacity: 0;
        }
    }
}

/* Utility classes */

@utility animation-duration-* {
    --tw-animation-duration: calc(--value(number) * 1ms);
    --tw-animation-duration: --value(
        --animation-duration-*,
        [duration],
        "initial",
        [*]
    );
    animation-duration: calc(--value(number) * 1ms);
    animation-duration: --value(
        --animation-duration-*,
        [duration],
        "initial",
        [*]
    );
}

@utility delay-* {
    animation-delay: calc(--value(number) * 1ms);
    animation-delay: --value(--animation-delay-*, [duration], "initial", [*]);
    --tw-animation-delay: calc(--value(number) * 1ms);
    --tw-animation-delay: --value(
        --animation-delay-*,
        [duration],
        "initial",
        [*]
    );
}

@utility repeat-* {
    animation-iteration-count: --value(
        --animation-repeat-*,
        number,
        "initial",
        [*]
    );
    --tw-animation-iteration-count: --value(
        --animation-repeat-*,
        number,
        "initial",
        [*]
    );
}

@utility direction-* {
    animation-direction: --value(--animation-direction-*, "initial", [*]);
    --tw-animation-direction: --value(--animation-direction-*, "initial", [*]);
}

@utility fill-mode-* {
    animation-fill-mode: --value(--animation-fill-mode-*, "initial", [*]);
    --tw-animation-fill-mode: --value(--animation-fill-mode-*, "initial", [*]);
}

@utility running {
    animation-play-state: running;
}
@utility paused {
    animation-play-state: paused;
}
@utility play-state-* {
    animation-play-state: --value("initial", [*]);
}

@utility blur-in {
    --tw-enter-blur: 20px;
}
@utility blur-in-* {
    --tw-enter-blur: calc(--value(number) * 1px);
    --tw-enter-blur: --value(--blur-*, [*]);
}

@utility blur-out {
    --tw-exit-blur: 20px;
}
@utility blur-out-* {
    --tw-exit-blur: calc(--value(number) * 1px);
    --tw-exit-blur: --value(--blur-*, [*]);
}

@utility fade-in {
    --tw-enter-opacity: 0;
}
@utility fade-in-* {
    --tw-enter-opacity: calc(--value(number) / 100);
    --tw-enter-opacity: --value(--percentage-*, [*]);
}

@utility fade-out {
    --tw-exit-opacity: 0;
}
@utility fade-out-* {
    --tw-exit-opacity: calc(--value(number) / 100);
    --tw-exit-opacity: --value(--percentage-*, [*]);
}

@utility zoom-in {
    --tw-enter-scale: 0;
}
@utility zoom-in-* {
    --tw-enter-scale: calc(--value(number) * 1%);
    --tw-enter-scale: calc(--value(ratio));
    --tw-enter-scale: --value(--percentage-*, [*]);
}
@utility -zoom-in-* {
    --tw-enter-scale: calc(--value(number) * -1%);
    --tw-enter-scale: calc(--value(ratio) * -1);
    --tw-enter-scale: --value(--percentage-*, [*]);
}

@utility zoom-out {
    --tw-exit-scale: 0;
}
@utility zoom-out-* {
    --tw-exit-scale: calc(--value(number) * 1%);
    --tw-exit-scale: calc(--value(ratio));
    --tw-exit-scale: --value(--percentage-*, [*]);
}
@utility -zoom-out-* {
    --tw-exit-scale: calc(--value(number) * -1%);
    --tw-exit-scale: calc(--value(ratio) * -1);
    --tw-exit-scale: --value(--percentage-*, [*]);
}

@utility spin-in {
    --tw-enter-rotate: 30deg;
}
@utility spin-in-* {
    --tw-enter-rotate: calc(--value(number) * 1deg);
    --tw-enter-rotate: calc(--value(ratio) * 360deg);
    --tw-enter-rotate: --value(--rotate-*, [*]);
}
@utility -spin-in {
    --tw-enter-rotate: -30deg;
}
@utility -spin-in-* {
    --tw-enter-rotate: calc(--value(number) * -1deg);
    --tw-enter-rotate: calc(--value(ratio) * -360deg);
    --tw-enter-rotate: --value(--rotate-*, [*]);
}

@utility spin-out {
    --tw-exit-rotate: 30deg;
}
@utility spin-out-* {
    --tw-exit-rotate: calc(--value(number) * 1deg);
    --tw-exit-rotate: calc(--value(ratio) * 360deg);
    --tw-exit-rotate: --value(--rotate-*, [*]);
}
@utility -spin-out {
    --tw-exit-rotate: -30deg;
}
@utility -spin-out-* {
    --tw-exit-rotate: calc(--value(number) * -1deg);
    --tw-exit-rotate: calc(--value(ratio) * -360deg);
    --tw-exit-rotate: --value(--rotate-*, [*]);
}

@utility slide-in-from-top {
    --tw-enter-translate-y: -100%;
}
@utility slide-in-from-top-* {
    --tw-enter-translate-y: calc(--value(integer) * var(--spacing) * -1);
    --tw-enter-translate-y: calc(
        --value(--percentage-*, --percentage-translate-*) * -100%
    );
    --tw-enter-translate-y: calc(--value(ratio) * -100%);
    --tw-enter-translate-y: calc(
        --value(--translate-*, [percentage], [length]) * -1
    );
}
@utility slide-in-from-bottom {
    --tw-enter-translate-y: 100%;
}
@utility slide-in-from-bottom-* {
    --tw-enter-translate-y: calc(--value(integer) * var(--spacing));
    --tw-enter-translate-y: calc(
        --value(--percentage-*, --percentage-translate-*) * 100%
    );
    --tw-enter-translate-y: calc(--value(ratio) * 100%);
    --tw-enter-translate-y: --value(--translate-*, [percentage], [length]);
}
@utility slide-in-from-left {
    --tw-enter-translate-x: -100%;
}
@utility slide-in-from-left-* {
    --tw-enter-translate-x: calc(--value(integer) * var(--spacing) * -1);
    --tw-enter-translate-x: calc(
        --value(--percentage-*, --percentage-translate-*) * -100%
    );
    --tw-enter-translate-x: calc(--value(ratio) * -100%);
    --tw-enter-translate-x: calc(
        --value(--translate-*, [percentage], [length]) * -1
    );
}
@utility slide-in-from-right {
    --tw-enter-translate-x: 100%;
}
@utility slide-in-from-right-* {
    --tw-enter-translate-x: calc(--value(integer) * var(--spacing));
    --tw-enter-translate-x: calc(
        --value(--percentage-*, --percentage-translate-*) * 100%
    );
    --tw-enter-translate-x: calc(--value(ratio) * 100%);
    --tw-enter-translate-x: --value(--translate-*, [percentage], [length]);
}
@utility slide-in-from-start {
    &:dir(ltr) {
        --tw-enter-translate-x: -100%;
    }
    &:dir(rtl) {
        --tw-enter-translate-x: 100%;
    }
}
@utility slide-in-from-start-* {
    &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
        --tw-enter-translate-x: calc(--value(integer) * var(--spacing) * -1);
        --tw-enter-translate-x: calc(
            --value(--percentage-*, --percentage-translate-*) * -100%
        );
        --tw-enter-translate-x: calc(--value(ratio) * -100%);
        --tw-enter-translate-x: calc(
            --value(--translate-*, [percentage], [length]) * -1
        );
    }
    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
        --tw-enter-translate-x: calc(--value(integer) * var(--spacing));
        --tw-enter-translate-x: calc(
            --value(--percentage-*, --percentage-translate-*) * 100%
        );
        --tw-enter-translate-x: calc(--value(ratio) * 100%);
        --tw-enter-translate-x: --value(--translate-*, [percentage], [length]);
    }
}
@utility slide-in-from-end {
    &:dir(ltr) {
        --tw-enter-translate-x: 100%;
    }
    &:dir(rtl) {
        --tw-enter-translate-x: -100%;
    }
}
@utility slide-in-from-end-* {
    &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
        --tw-enter-translate-x: calc(--value(integer) * var(--spacing));
        --tw-enter-translate-x: calc(
            --value(--percentage-*, --percentage-translate-*) * 100%
        );
        --tw-enter-translate-x: calc(--value(ratio) * 100%);
        --tw-enter-translate-x: --value(--translate-*, [percentage], [length]);
    }
    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
        --tw-enter-translate-x: calc(--value(integer) * var(--spacing) * -1);
        --tw-enter-translate-x: calc(
            --value(--percentage-*, --percentage-translate-*) * -100%
        );
        --tw-enter-translate-x: calc(--value(ratio) * -100%);
        --tw-enter-translate-x: calc(
            --value(--translate-*, [percentage], [length]) * -1
        );
    }
}

@utility slide-out-to-top {
    --tw-exit-translate-y: -100%;
}
@utility slide-out-to-top-* {
    --tw-exit-translate-y: calc(--value(integer) * var(--spacing) * -1);
    --tw-exit-translate-y: calc(
        --value(--percentage-*, --percentage-translate-*) * -100%
    );
    --tw-exit-translate-y: calc(--value(ratio) * -100%);
    --tw-exit-translate-y: calc(
        --value(--translate-*, [percentage], [length]) * -1
    );
}
@utility slide-out-to-bottom {
    --tw-exit-translate-y: 100%;
}
@utility slide-out-to-bottom-* {
    --tw-exit-translate-y: calc(--value(integer) * var(--spacing));
    --tw-exit-translate-y: calc(
        --value(--percentage-*, --percentage-translate-*) * 100%
    );
    --tw-exit-translate-y: calc(--value(ratio) * 100%);
    --tw-exit-translate-y: --value(--translate-*, [percentage], [length]);
}
@utility slide-out-to-left {
    --tw-exit-translate-x: -100%;
}
@utility slide-out-to-left-* {
    --tw-exit-translate-x: calc(--value(integer) * var(--spacing) * -1);
    --tw-exit-translate-x: calc(
        --value(--percentage-*, --percentage-translate-*) * -100%
    );
    --tw-exit-translate-x: calc(--value(ratio) * -100%);
    --tw-exit-translate-x: calc(
        --value(--translate-*, [percentage], [length]) * -1
    );
}
@utility slide-out-to-right {
    --tw-exit-translate-x: 100%;
}
@utility slide-out-to-right-* {
    --tw-exit-translate-x: calc(--value(integer) * var(--spacing));
    --tw-exit-translate-x: calc(
        --value(--percentage-*, --percentage-translate-*) * 100%
    );
    --tw-exit-translate-x: calc(--value(ratio) * 100%);
    --tw-exit-translate-x: --value(--translate-*, [percentage], [length]);
}
@utility slide-out-to-start {
    &:dir(ltr) {
        --tw-exit-translate-x: -100%;
    }
    &:dir(rtl) {
        --tw-exit-translate-x: 100%;
    }
}
@utility slide-out-to-start-* {
    &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
        --tw-exit-translate-x: calc(--value(integer) * var(--spacing) * -1);
        --tw-exit-translate-x: calc(
            --value(--percentage-*, --percentage-translate-*) * -100%
        );
        --tw-exit-translate-x: calc(--value(ratio) * -100%);
        --tw-exit-translate-x: calc(
            --value(--translate-*, [percentage], [length]) * -1
        );
    }
    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
        --tw-exit-translate-x: calc(--value(integer) * var(--spacing));
        --tw-exit-translate-x: calc(
            --value(--percentage-*, --percentage-translate-*) * 100%
        );
        --tw-exit-translate-x: calc(--value(ratio) * 100%);
        --tw-exit-translate-x: --value(--translate-*, [percentage], [length]);
    }
}
@utility slide-out-to-end {
    &:dir(ltr) {
        --tw-exit-translate-x: 100%;
    }
    &:dir(rtl) {
        --tw-exit-translate-x: -100%;
    }
}
@utility slide-out-to-end-* {
    &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
        --tw-exit-translate-x: calc(--value(integer) * var(--spacing));
        --tw-exit-translate-x: calc(
            --value(--percentage-*, --percentage-translate-*) * 100%
        );
        --tw-exit-translate-x: calc(--value(ratio) * 100%);
        --tw-exit-translate-x: --value(--translate-*, [percentage], [length]);
    }
    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
        --tw-exit-translate-x: calc(--value(integer) * var(--spacing) * -1);
        --tw-exit-translate-x: calc(
            --value(--percentage-*, --percentage-translate-*) * -100%
        );
        --tw-exit-translate-x: calc(--value(ratio) * -100%);
        --tw-exit-translate-x: calc(
            --value(--translate-*, [percentage], [length]) * -1
        );
    }
}