:root {
    accent-color: var(--mud-palette-primary);
}

.app-theme {
    display: contents;
}

[data-theme="dark"] {
    color-scheme: dark;
}

[data-theme="light"] {
    color-scheme: light;
}

html,
body {
    height: 100%;
    background-color: var(--mud-palette-background, #141B1E);
}

h1:focus {
    outline: none;
}

.text-ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
}

/* One scrollbar recipe for the whole app. Anything that scrolls and does not opt out gets this, so
   no container needs to restate it and none can drift back to the browser default. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--tp-scrollbar-thumb) transparent;
}

*::-webkit-scrollbar {
    width: var(--tp-scrollbar-size);
    height: var(--tp-scrollbar-size);
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--tp-scrollbar-thumb);
    border-radius: 2px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--tp-scrollbar-thumb-hover);
}



@media (max-width: 599.98px) {
    input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
    textarea,
    select {
        font-size: 16px;
    }
}

@keyframes asset-image-shimmer {
    from {
        background-position: -100% 0;
    }
    to {
        background-position: 200% 0;
    }
}

img[data-asset-img] {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 9%, transparent);
    background-image: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent),
        transparent);
    background-size: 50% 100%;
    background-repeat: no-repeat;
    animation: asset-image-shimmer var(--tp-shimmer-dur) ease-in-out infinite;
}

img[data-asset-img][data-asset-state] {
    background: none;
    animation: none;
}

img[data-asset-img][data-asset-state="failed"] {
    visibility: hidden;
}