/* ==========================================
   AGENDA BANNER
========================================== */

.agendabar{
    background: var(--agenda-bar-bg);
    color: var(--agenda-bar-c);
    padding: 5px 0;
    overflow: hidden;
    white-space: nowrap;
    border-top: 1px solid var(--dataregel-top);
    border-bottom: 1px solid var(--dataregel-bottom);
}

/* Alle tekst in de banner */
.agendabar,
.agendabar *{
    color: var(--agenda-bar-c);
    box-sizing: border-box;
}

/* Scrollende baan */
.agendabar-track{
    display: flex;
    align-items: center;
    width: max-content;
    will-change: transform;
    animation: marquee linear infinite;
}

/* Groep per agenda-item */
.agendabar-group{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: 25px;
}

/* Links */
.agendabar-item,
.agendabar-item:link,
.agendabar-item:visited,
.agendabar-item:active{
    color: var(--agenda-bar-c);
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease;
}

/* Hover */
.agendabar-item:hover,
.agendabar-item:focus{
    color: var(--agenda-bar-c-hover);
}

/* Icoon */
.agendabar-icon{
    color: var(--agenda-bar-c-hover);
    flex-shrink: 0;
}

/* Animatie */
@keyframes marquee{
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-50%);
    }
}

/* Pauzeren bij hover */
.agendabar:hover .agendabar-track{
    animation-play-state: paused;
}