/* Container styling */
.vm-dfd0e201-wrapper {
    position: relative;
    width: 100%;
}

.vm-dfd0e201-container {
    position: relative;
    overflow: hidden;
    height: 300px; /* Overridden by settings */
    width: 100%;
    display: flex;
    flex-direction: column;
    --vm-blur-size: 15%;
}

/* Edge blur using CSS mask */
.vm-dfd0e201-container.has-blur {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black var(--vm-blur-size), black calc(100% - var(--vm-blur-size)), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black var(--vm-blur-size), black calc(100% - var(--vm-blur-size)), transparent 100%);
}

.vm-dfd0e201-track {
    --vm-speed: 20s;
    --vm-direction: normal;
    display: flex;
    flex-direction: column;
    animation: marquee-vertical-dfd0e201 var(--vm-speed) linear infinite var(--vm-direction);
    will-change: transform;
}

.vm-dfd0e201-track:hover {
    animation-play-state: paused;
}

.vm-dfd0e201-content {
    display: flex;
    flex-direction: column;
}

.vm-dfd0e201-item {
    padding: 15px;
    margin-bottom: 15px;
    background-color: #f5f5f5;
    text-align: center;
    border-radius: 4px;
    word-break: break-word;
}

/* Keyframes dynamically handle offset. JS will clone the content. */
@keyframes marquee-vertical-dfd0e201 {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}