/* Announcements */

@keyframes translate-left {
    0% { transform: translate(0); }
    to { transform: translate(-100%); }
}

@keyframes translate-right {
    0% { transform: translate(-100%); }
    to { transform: translate(0); }
}

.announcement-bar {
    display: flex;
    position: relative;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    height: 100%;

    & > div,
    & > div > div {
        display: flex;
        align-items: center;
        will-change: transform;
        flex-shrink: 0;
        user-select: none;
    }

    &:not(.direction-right) > div {
        animation: translate-left var(--announcement-speed, 20s) linear infinite;
        animation-delay: var(--announcement-delay, 1s);
    }

    &.direction-right > div {
        animation: translate-right var(--announcement-speed, 20s) linear infinite;
        animation-delay: var(--announcement-delay, 1s);
    }

    &.pause-on-hover {
        & > div { animation-play-state: running; }
        &.paused > div,
        &.hover > div,
        &:hover > div { animation-play-state: paused; }
    }

}