/* Full-width banner using a lighter, semi-transparent warning color */
.version-banner {
    width: 100%;
    /* force our color over MudPaper / theme surface */
    background-color: rgba(255, 184, 77, 0.6) !important; /* lighter than #FF9800 and 90% opacity */
    color: var(--mud-palette-text-primary);
    border-bottom: 1px solid rgba(255, 152, 0, 1);
    box-sizing: border-box;
    padding: 4px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 1000;
}

/* Icon: fixed */
.version-banner-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

/* Text area: takes remaining width, no wrapping, hides overflow */
.version-banner-text-wrapper {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
}

/* Close button: fixed, stays on same line */
.version-banner-close {
    flex: 0 0 auto;
}

/* Moving text: simple CSS marquee */
.version-banner-text {
    display: inline-block;
    font-weight: 600;
    padding-left: 100%; /* start from the right side */
    animation: version-banner-marquee 20s linear infinite;
}

@keyframes version-banner-marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}