/* SomGeek scrolling information ticker */

.sg-breaking {
    grid-template-columns: 190px minmax(0, 1fr);
}

.sg-breaking__label {
    position: relative;
    z-index: 2;
    gap: 10px;
    padding: 0 22px;
    background: linear-gradient(135deg, rgba(226, 170, 22, 0.14), rgba(226, 170, 22, 0.03));
    transform: none;
    white-space: nowrap;
}

.sg-breaking__label > * {
    transform: none;
}

.sg-breaking__label span:first-child {
    font-size: 1.55rem;
}

.sg-breaking__label span:last-child {
    font-size: 0.94rem;
    letter-spacing: 0.055em;
}

.sg-breaking__items {
    position: relative;
    display: block;
    min-width: 0;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.sg-breaking__track {
    width: max-content;
    min-height: 56px;
    display: flex;
    align-items: center;
    animation: sg-breaking-scroll var(--sg-ticker-duration, 34s) linear infinite;
    will-change: transform;
}

.sg-breaking__group {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.sg-breaking__items:hover .sg-breaking__track,
.sg-breaking__items:focus-within .sg-breaking__track {
    animation-play-state: paused;
}

.sg-breaking__items a,
.sg-breaking__items span {
    position: relative;
    flex: 0 0 auto;
    max-width: none;
    padding: 0 44px 0 24px;
    overflow: visible;
    color: #d2d6da;
    font-size: 0.88rem;
    text-overflow: clip;
    white-space: nowrap;
}

.sg-breaking__items a::after {
    content: "◆";
    position: absolute;
    top: 50%;
    right: 17px;
    color: var(--sg-gold);
    font-size: 0.48rem;
    transform: translateY(-50%);
}

.sg-breaking__items a:hover,
.sg-breaking__items a:focus {
    color: var(--sg-gold-bright);
}

@keyframes sg-breaking-scroll {
    from {
        transform: translateX(0);
    }

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

@media (max-width: 720px) {
    .sg-breaking {
        grid-template-columns: 132px minmax(0, 1fr);
    }

    .sg-breaking__label {
        padding: 0 14px;
    }

    .sg-breaking__label span:first-child {
        font-size: 1.25rem;
    }

    .sg-breaking__label span:last-child {
        font-size: 0.72rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sg-breaking__track {
        animation: none;
    }

    .sg-breaking__items {
        overflow-x: auto;
        mask-image: none;
        -webkit-mask-image: none;
    }

    .sg-breaking__group[aria-hidden="true"] {
        display: none;
    }
}
