.marquee-container {
    overflow: hidden;
    width: 100%;
    position: relative;
}

li .marquee-container {
    flex: 1;
    min-width: 0;
}

.marquee-content {
    display: block;
    overflow: hidden;
    width: 100%;
    margin: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.marquee-track {
    display: inline-flex;
    align-items: center;
    gap: 2rem;
    width: max-content;
    white-space: nowrap;
    will-change: transform;
}

.marquee-item {
    white-space: nowrap;
    flex: none;
}

.marquee-track.is-animating {
    animation: none;
}

li:not(.active) .marquee-track.is-animating {
    width: 100%;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

li:not(.active) .marquee-track.is-animating .marquee-item:nth-child(2) {
    display: none;
}

#now-name-card .marquee-track.is-animating,
li.active .marquee-track.is-animating {
    animation: marquee-scroll var(--marquee-duration, 10s) linear infinite;
    display: inline-flex;
    width: max-content;
}

@keyframes marquee-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(calc(-1 * var(--marquee-distance, 0px)), 0, 0);
    }
}

li.search-hidden {
    display: none !important;
}

.rename-input {
    width: 100%;
    box-sizing: border-box;
    font-size: inherit;
    font-family: inherit;
    padding: 2px 4px;
    border: 1px solid var(--outline);
    border-radius: 4px;
    background: var(--surface-container-high);
    color: var(--on-surface);
    outline: none;
}

.rename-input:focus {
    border-color: var(--primary);
}

body {
    padding: 0px !important;
}


dialog {
    max-width: min(90vw, 80ch) !important;
}

@media (max-width: 1000px) {
    dialog {
        max-width: min(90vw, 50ch) !important;
    }
}

@media (max-width: 600px) {
    dialog {
        max-width: min(95vw, 30ch) !important;
    }
}