.stock-ticker {
    --ticker-border: #e5e7eb;
    --ticker-text: #131722;
    --ticker-up: #089981;
    --ticker-down: #f23645;

    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    height: 58px;
    overflow: hidden;
    box-sizing: border-box;
    background: transparent;
    color: var(--ticker-text);
    font-family: Arial, Helvetica, sans-serif;
    box-shadow: 0 6px 16px -12px rgba(15, 30, 60, .18);
}

.stock-ticker *,
.stock-ticker *::before,
.stock-ticker *::after {
    box-sizing: border-box;
}

.stock-ticker__label {
    flex: 0 0 auto;
    padding: 0 10px;
    color: #787b86;
    font-size: 9px;
    letter-spacing: 0.06em;
}

.stock-ticker__viewport {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.stock-ticker__track,
.stock-ticker__group {
    display: flex;
    align-items: center;
    width: max-content;
}

.stock-ticker__track {
    will-change: transform;
}

.stock-ticker__group {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stock-ticker__item {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 22px;
    border-right: 1px solid var(--ticker-border);
    white-space: nowrap;
}

.stock-ticker__icon {
    display: grid;
    flex: 0 0 28px;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--icon-color, #2962ff);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
}

.stock-ticker__name {
    font-size: 14px;
    font-weight: 600;
}

.stock-ticker__numbers {
    display: flex;
    gap: 9px;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.stock-ticker__change--up {
    color: var(--ticker-up);
}

.stock-ticker__change--down {
    color: var(--ticker-down);
}

.stock-ticker__badge {
    display: grid;
    flex: 0 0 48px;
    place-items: center;
    align-self: stretch;
    border: 1px solid var(--ticker-border);
    color: #131722;
    pointer-events: none;
    border-radius: 12px;
    inset-inline-end: 0;
    box-sizing: border-box;
    height: 24px;
    max-width: 28px;
    overflow: hidden;
    padding: 0 6px;
    position: absolute;
    transition: max-width .6s cubic-bezier(.4, .01, .22, 1) 0s, background .3s cubic-bezier(.4, .01, .22, 1) 0s;
    z-index: 93;
    margin-top: 13px;
    background-color: white;
    box-shadow: 0 6px 16px -12px rgba(15, 30, 60, .18)
}

.stock-ticker__badge svg {
    display: block;
}

@media (max-width: 640px) {
    .stock-ticker__item {
        gap: 8px;
        padding-inline: 14px;
    }

    .stock-ticker__numbers {
        flex-direction: column;
        gap: 2px;
        font-size: 12px;
    }

    .stock-ticker__name {
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stock-ticker__viewport {
        overflow-x: auto;
    }

    .stock-ticker__track {
        will-change: auto;
    }
}
.stock-ticker {
    background: #fff !important;
}

/* */