@import "tailwindcss";
@plugin "tailwindcss-animate";

@theme {
    --color-border: hsl(var(--border));
    --color-input: hsl(var(--input));
    --color-ring: hsl(var(--ring));
    --color-background: hsl(var(--background));
    --color-foreground: hsl(var(--foreground));

    --color-primary: hsl(var(--primary));
    --color-primary-foreground: hsl(var(--primary-foreground));

    --color-secondary: hsl(var(--secondary));
    --color-secondary-foreground: hsl(var(--secondary-foreground));

    --color-destructive: hsl(var(--destructive));
    --color-destructive-foreground: hsl(var(--destructive-foreground));

    --color-muted: hsl(var(--muted));
    --color-muted-foreground: hsl(var(--muted-foreground));

    --color-accent: hsl(var(--accent));
    --color-accent-foreground: hsl(var(--accent-foreground));

    --color-popover: hsl(var(--popover));
    --color-popover-foreground: hsl(var(--popover-foreground));

    --color-card: hsl(var(--card));
    --color-card-foreground: hsl(var(--card-foreground));

    --color-burgundy-500: #800020;
    --color-burgundy-600: #600010;
}

.field_with_errors > input {
    @apply border-red-500 focus:ring-red-500;
}

/* set navigation: auto unless prefers low motion */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}

@keyframes move-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes move-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

::view-transition-old(root) {
    animation: 0s ease-out both move-out;
}

::view-transition-new(root) {
    animation: 0s ease-in both move-in;
}


.inline-action {
    display: none
}

.inline-edit .inline-action {
    display: initial
}