:root {
    --color-orange: #FF9900;
    --color-dark-blue: #246082;
    --color-light-blue: #339999;
    --color-white: white;
    --font_source_sans_pro: 'Source Sans Pro', sans-serif;
}

.navbar-status.glass {
    display: flex;
    align-items: flex-start;

    padding: .75rem 1rem;
    border-radius: 18px;

    /* Glass */
    background: linear-gradient(
        135deg,
        rgba(255,255,255,.22),
        rgba(255,255,255,.08)
    );

    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);

    border: 1px solid rgba(255,255,255,.25);

    box-shadow:
        0 8px 32px rgba(0,0,0,.15),
        inset 0 1px 1px rgba(255,255,255,.25);
}

.navbar-status.color {
    color: var(--color-white);
    background-color: var(--color-dark-blue);
    padding: 0.5rem;
    border-radius: 1em;

    .label {
        color: var(--color-white);
    }

    .status-item span {
        color: var(--color-orange);
    }
}

.navbar-status {
    cursor: help;
    display: flex;
    max-width: fit-content;
    flex-direction: column;
    align-items: start;
    font-size: .75rem;
    font-family: var(--font_source_sans_pro);
}

.label {
    color: #666;
    white-space: nowrap;
}

.status-carousel {
    width: 180px;
    height: 24px;
    overflow: hidden;
    position: relative;
}

.status-track {
    position: relative;
    height: 100%;
}

.status-item {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    opacity: 0;
    transform: translateY(10px);

    transition:
        opacity .4s ease,
        transform .4s ease;
}

.status-item.active {
    opacity: 1;
    transform: translateY(0);
}

.status-item strong {
    font-weight: 600;
}

.status-item span {
    color: var(--color-light-blue);
    font-weight: 700;
}

@media (max-width: 1000px) {
    .navbar-status .label {
        font-size: 0;
    }

    .navbar-status .label::before {
        content: attr(data-short);
        font-size: 0.9rem; /* Slightly smaller for mobile layout */
        font-weight: bold;
    }

    .status-carousel {
        width: 75px;
    }

    .status-item strong {
        font-size: 0;
    }
    
    .status-item strong::before {
        content: attr(data-short);
        font-size: 0.9rem; /* Slightly smaller for mobile layout */
        font-weight: bold;
    }
}