/*
 * Imagemine base styles.
 * Tailwind utility classes (Play CDN) handle the bulk of styling; this file holds
 * the things Tailwind can't: the themeable accent colour (exposed as CSS custom
 * properties consumed by the Tailwind `accent` colour), scrollbars, animations
 * and the Blazor error UI.
 */

/* Accent: blue for the light theme, red for the dark theme. Values are space-
   separated RGB channels so Tailwind's `rgb(var(--accent) / <alpha-value>)`
   colour definition can apply opacity. */
:root {
    --accent: 37 99 235;        /* blue-600 */
    --accent-hover: 29 78 216;  /* blue-700 */
}

html.dark {
    --accent: 220 38 38;        /* red-600 */
    --accent-hover: 185 28 28;  /* red-700 */
}

html {
    scroll-behavior: smooth;
}

* {
    -webkit-tap-highlight-color: transparent;
}

/* Color transitions when toggling theme. */
body,
.theme-transition,
.theme-transition * {
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

/* Themed scrollbar. */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgb(var(--accent) / 0.45);
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--accent) / 0.8);
}

/* Subtle entrance animation used across pages. */
.fade-in {
    animation: imagemine-fade-in .45s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes imagemine-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Blazor unhandled-error toast. */
#blazor-error-ui {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1000;
    display: none;
    padding: 0.9rem 1.25rem;
    background: #b91c1c;
    color: #fff;
    box-shadow: 0 -2px 18px rgba(0, 0, 0, .35);
    font-size: .9rem;
}

#blazor-error-ui .reload,
#blazor-error-ui .dismiss {
    margin-left: 1rem;
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
}