/**
 * Market Ticker Pro
 * Frontend CSS
 */


.market-ticker {
    width:100%;
    overflow:hidden;
    white-space:nowrap;
    background:#fff;
    border-top:1px solid #e5e5e5;
    border-bottom:1px solid #e5e5e5;
}


.market-track {
    display:flex;
    align-items:center;
    width:max-content;
    animation:mtp-scroll var(--mtp-speed,35s) linear infinite;
}


.market-ticker:hover .market-track {
    animation-play-state:paused;
}


.market-item {
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 24px;
    font-size:14px;
}


.market-name {
    color:#111;
    font-weight:600;
}


.market-change {
    display:flex;
    align-items:center;
    gap:4px;
    font-weight:700;
}


.market-arrow {
    width:12px;
    height:12px;
    fill:currentColor;
}


.market-change.up {
    color:#16803c;
}


.market-change.down {
    color:#c62828;
}


/* Market Status */

.market-status {
    padding:3px 7px;
    border-radius:3px;
    font-size:11px;
    font-weight:600;
}


.market-status.open {
    color:#16803c;
    background:#e8f5e9;
}


.market-status.pre {
    color:#1769aa;
    background:#e3f2fd;
}


.market-status.after {
    color:#c76a00;
    background:#fff3e0;
}


.market-status.closed {
    color:#666;
    background:#eee;
}


/* Animation */

@keyframes mtp-scroll {

    from {
        transform:translateX(0);
    }

    to {
        transform:translateX(-50%);
    }

}


/* License Notice */

.mtp-license-notice {
    padding:12px;
    background:#fff3cd;
    border:1px solid #ffeeba;
    color:#856404;
}


/* Dark Mode */

body.dark-mode .market-ticker {
    background:#111;
    border-color:#333;
}


body.dark-mode .market-name {
    color:#eee;
}


body.dark-mode .market-status.closed {
    background:#333;
    color:#aaa;
}


/* Responsive */

@media(max-width:768px) {

    .market-item {
        padding:8px 14px;
        font-size:12px;
    }


    .market-arrow {
        width:10px;
        height:10px;
    }


    .market-status {
        font-size:10px;
    }


    .market-track {
        animation-duration:
            calc(var(--mtp-speed,35s) * 1.5);
    }

}