/* Generated by the Queueify theme editor - edit the theme there, not here.
   Hand edits are overwritten the next time the theme is saved. */

.widget {
    position: relative;
    box-sizing: border-box;
    width: 680px;
    height: 160px;
    padding: 0px;

    background: linear-gradient(135deg, var(--album-dark), var(--album-vibrant));
    border: 0px solid rgba(255,255,255,0.08);
    border-radius: 32px;

    overflow: hidden;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #fff;

    opacity: 1;
    transform: translateY(0);
    transition: opacity .4s ease, transform .4s ease;
}

.widget.hidden {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}


/* Album art / Canvas video */

.cover,
.canvas {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 160px;
    height: 160px;
    z-index: 0;
    object-fit: cover;
    border-radius: 24px 0px 0px 24px;
    box-shadow: 0 22px 44px rgba(0, 0, 0, .38);
    
}

/* Title */

.title-wrapper {
    position: absolute;
    left: 177px;
    top: 0px;
    width: 501px;
    height: 69px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    justify-content: flex-start;
    overflow: hidden;
    z-index: 2;
    
}

.title-wrapper > * {
    font-family: "Segoe UI Rounded", "SF Pro Rounded", system-ui, sans-serif;
    font-size: 40px;
    font-weight: 400;
    font-style: normal;
    color: #ffffff;
    letter-spacing: 0px;
    text-transform: none;
    opacity: 1;
    white-space: nowrap;
}

/* No clip of its own: the wrapper above already cuts at the right place, and
   this box is only as tall as one line of text - tight enough to shave the top
   and bottom off an outline before the wrapper ever saw it. */

.title-container {
    width: 100%;
    /* Full width on purpose - app.js measures it to decide whether the title
       fits - which leaves the wrapper's alignment nothing to move. So the
       title is aligned in here instead, or it always sat on the left. */
    display: flex;
    justify-content: flex-start;
}

/* A line that scrolls starts at its beginning whatever its alignment, for the
   browsers that ignore `safe` above. The title's own `scrolling` class
   arrives 250ms late for the fade, so app.js marks the container at once. */
.title-container.overflowing,
.artist-wrapper.scrolling {
    justify-content: flex-start;
}

.title {
    display: inline-block;
}

/* Artist */

.artist-wrapper {
    position: absolute;
    left: 177px;
    top: 69px;
    width: 501px;
    height: 46px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    justify-content: flex-start;
    overflow: hidden;
    z-index: 2;
    
}

.artist-wrapper > * {
    font-family: "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
    font-size: 35px;
    font-weight: 400;
    font-style: normal;
    color: #ffffff;
    letter-spacing: 0px;
    text-transform: none;
    opacity: 1;
    white-space: nowrap;
}

.artist {
    display: inline-block;
}

/* Progress */

.progress-container {
    position: absolute;
    left: 218px;
    top: 127px;
    width: 397px;
    height: 20px;
    z-index: 2;
    background: var(--album-light);
    border-radius: 999px;
    overflow: hidden;
    
}

.progress {
    width: 0%;
    height: 100%;
    background: var(--album-vibrant);
    border-radius: inherit;
    transition: width .25s linear;
}

/* How far into the song, and how long it runs for. app.js writes both. */

.elapsed-wrapper {
    position: absolute;
    left: 167px;
    top: 126px;
    width: 58px;
    height: 20px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    justify-content: flex-start;
    overflow: hidden;
    z-index: 2;
    
}

.elapsed-wrapper > * {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 20px;
    font-weight: 600;
    font-style: normal;
    color: var(--album-light);
    letter-spacing: 0px;
    text-transform: none;
    opacity: 0.75;
    white-space: nowrap;
}

.elapsed {
    display: inline-block;
    /* Digits change every second; a proportional font would jiggle the label
       about as 1s and 4s swap places. */
    font-variant-numeric: tabular-nums;
}

.duration-wrapper {
    position: absolute;
    left: 604px;
    top: 126px;
    width: 58px;
    height: 20px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    justify-content: flex-end;
    justify-content: safe flex-end;
    overflow: hidden;
    z-index: 2;
    
}

.duration-wrapper > * {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 20px;
    font-weight: 600;
    font-style: normal;
    color: var(--album-light);
    letter-spacing: 0px;
    text-transform: none;
    opacity: 0.75;
    white-space: nowrap;
}

.duration {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

/* Long text scrolls instead of being cut off. app.js measures each line and
   sets --scroll-distance (title) and --artist-distance (artist) per song, and
   only marks the ones that actually overflow. */

.title,
.artist {
    will-change: transform;
}

.title.scroll {
    animation: queueify-scroll-title var(--scroll-duration, 8s) linear infinite;
}

.artist.scroll {
    animation: queueify-scroll-artist var(--scroll-duration, 8s) linear infinite;
}

@keyframes queueify-scroll-title {
    0%, 20% { transform: translateX(0); }
    50%, 80% { transform: translateX(calc(-1 * var(--scroll-distance, 0px))); }
    100% { transform: translateX(0); }
}

@keyframes queueify-scroll-artist {
    0%, 20% { transform: translateX(0); }
    50%, 80% { transform: translateX(calc(-1 * var(--artist-distance, 0px))); }
    100% { transform: translateX(0); }
}


/* Soft edges, but only while a line is scrolling. */

.title-wrapper.scrolling {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}

.artist-wrapper.scrolling {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}


/* Stacking, as arranged in the editor */

.cover, .canvas { z-index: 2; }
.title-wrapper { z-index: 4; }
.progress-container { z-index: 6; }
.elapsed-wrapper { z-index: 8; }
.duration-wrapper { z-index: 10; }
.next-wrapper { z-index: 12; }
.artist-wrapper { z-index: 14; }