.marquee-plug {
    overflow-x: hidden;
    display: flex;
    flex-direction: row;
    position: relative;
    width: var(--width);
    transform: var(--transform)
}

.marquee-plug:hover div {
    animation-play-state: var(--pause-on-hover)
}

.marquee-plug:active div {
    animation-play-state: var(--pause-on-click)
}

.mp-overlay {
    position: absolute;
    width: 100%;
    height: 100%
}

.mp-overlay::before,
.mp-overlay::after {

    content: "";
    height: 100%;
    position: absolute;
    width: var(--gradient-width);
    z-index: 2;
    pointer-events: none;
    touch-action: none
}

.mp-overlay::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg)
}

.mp-overlay::before {
    left: 0;
    top: 0
}

.mp-track {
    flex: 0 0 auto;
    min-width: var(--min-width);
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    animation: scroll var(--duration) linear var(--delay) var(--iteration-count);
    animation-play-state: var(--play);
    animation-delay: var(--delay);
    animation-direction: var(--direction)
}

@keyframes scroll {
    0% {
        transform: translateX(0%)
    }

    100% {
        transform: translateX(-100%)
    }
}

.mp-list {
    display: flex;
    min-width: auto;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    list-style-type: none
}

.mp-item {
    transform: var(--transform);
    list-style-type: none !important;
    cursor: pointer
}