/* shared styles */

.development-banner {
    --development-banner-background: #fff4d6;
    --development-banner-border: #e8c466;
    --development-banner-foreground: #5c4300;
    --development-banner-badge-background: #5c4300;
    --development-banner-badge-foreground: #fffaf0;

    color: var(--development-banner-foreground);
    background: var(--development-banner-background);
    border-bottom: 1px solid var(--development-banner-border);
    font-size: 0.875rem;
    line-height: 1.45;
}

.development-banner__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: min(calc(100% - 2rem), 82.5rem);
    min-height: 2.75rem;
    margin-inline: auto;
    padding-block: 0.5rem;
    text-align: center;
}

.development-banner__badge {
    flex: 0 0 auto;
    padding: 0.2rem 0.55rem;
    color: var(--development-banner-badge-foreground);
    background: var(--development-banner-badge-background);
    border-radius: 999px;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

@media (max-width: 575.98px) {
    .development-banner__inner {
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0.5rem;
        width: min(calc(100% - 1.5rem), 82.5rem);
        text-align: left;
    }

    .development-banner__badge {
        margin-top: 0.1rem;
    }
}

[data-bs-theme='dark'] .development-banner {
    --development-banner-background: #2e260f;
    --development-banner-border: #6b5619;
    --development-banner-foreground: #ffe7a3;
    --development-banner-badge-background: #f2cb63;
    --development-banner-badge-foreground: #302400;
}