.preload {
    display: none;
}

.media-player {
    position: relative;
    width: 100%;
}

.thumbnail {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    pointer-events: none;
}

.media-player.audio .thumbnail {
    opacity: 0;
    transition: opacity 0s 1s;
}

.media-player .container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

video {
    width: 100%;
    pointer-events: none;
}

.media-player .container>* {
    transition: opacity var(--fadeTransition);
}


.media-player .controls {
    display: flex;
    gap: var(--padding);
    align-items: center;
    width: 100%;
    position: absolute;
    bottom: 0px;
    margin-bottom: -20px;
    z-index: 1;
}

.media-player .controls .button {
    border-radius: 100%;
    border: 0px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    position: absolute;
    left: 50%;
    translate: -50%;
    margin-top: -55px;
    width: 50px;
    height: 50px;
}

.media-player .controls .button svg {
    width: 50%;
    height: 50%;
    object-fit: contain;
    position: absolute;
    pointer-events: none;
    stroke-width: 40px;
    stroke: white;
}

.media-player .controls .progress {
    width: 100%;
    position: relative;
}

.media-player .controls .progress .time {
    position: absolute;
    display: flex;
    width: 100%;
    justify-content: space-between;
    top: -15px;
    pointer-events: none;
}

.media-player .controls .progress .bar {
    height: 40px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.media-player .controls .progress .bar .total,
.media-player .controls .progress .bar .elapsed {
    position: absolute;
    height: 1px;
    border-radius: 1px;
    pointer-events: none;
}

.media-player .controls .progress .bar .total {
    background-color: var(--lightgrey);
    width: 100%;
}

.media-player .controls .progress .bar .elapsed {
    background-color: white;
    width: 0%;
}

.media-player .controls .progress .bar .scrubber {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    translate: -50%;
    cursor: grab;
    border-radius: 40px;
    width: 50px;
    height: 50px;
}

.scrubber .inner {
    pointer-events: none;
}

.media-player .controls .progress .bar .scrubber:active {
    cursor: grabbing;
}


.media-player .controls .progress .bar .scrubber .inner {
    width: 10px;
    height: 10px;
    background-color: white;
    border-radius: 40px;
}

@media (hover: hover) {
    .media-player .controls .button:hover svg {
        stroke: #fff;
    }
}

/* specific to mainplayer */

.player .media-player {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.player .media-player .container {
    max-width: var(--maxWidth);
    height: 100%;
    position: relative;
    justify-content: flex-start;
    width: calc(100% - var(--padding)* 2);
}

.player .controls {
    bottom: max(var(--padding), var(--minPaddingY));
}

.player video {
    width: 100vw;
    height: 100vh;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    position: absolute;
    object-fit: cover;
    padding-bottom: 0px;
}

.media-nav-wrapper {
    position: absolute;
    bottom: calc(20px + max(var(--padding), var(--minPaddingY)));
    overflow: hidden;
    /* better text visibility on white backgrounds */
    mix-blend-mode: screen;
}

.media-nav {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;
    width: 100%;
    max-height: 43vh;
    color: var(--lightgrey);
    display: flex;
    flex-direction: column;
    gap: calc(var(--padding)/2);
    overscroll-behavior: contain;
    --fadeAmount: 10%;
    /* background: linear-gradient(to bottom, rgba(230, 0, 0, 0), rgba(230, 0, 0, 1) var(--fadeAmount), rgba(230, 0, 0, 1) calc(100% - var(--fadeAmount)), rgba(230, 0, 0, 0)); */
    mask: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) var(--fadeAmount), rgba(0, 0, 0, 1) calc(100% - var(--fadeAmount)), rgba(0, 0, 0, 0));
    padding-top: calc(var(--fadeAmount) + calc(var(--linkPadding) / 0.5)*2);
    padding-bottom: calc(var(--fadeAmount) + calc(var(--linkPadding) / 0.5)*2);
    box-sizing: content-box;
    text-shadow: var(--textShadow);
}

.media-nav .album-title {
    background: transparent;
    color: white;
    font-weight: 300;
    border-bottom: 1px solid var(--lightgrey);
    cursor: default;
    padding: calc(var(--linkPadding) / 0.5) var(--linkPadding);
    margin: calc(var(--linkPadding) * 0) calc(var(--linkPadding) * -1);
}

.media-nav .album {
    margin-bottom: 0px;
}

.media-nav .songs li {
    transition: color var(--linkTransition);
    cursor: pointer;
    padding: calc(var(--linkPadding)/2) var(--linkPadding);
    margin: calc(var(--linkPadding) * 0) calc(var(--linkPadding) * -1);
    transform-origin: left;
}

.media-nav .songs li:first-child {
    padding-top: calc(var(--linkPadding) / 0.5);
}

.media-nav .songs li:last-child {
    padding-bottom: calc(var(--linkPadding) / 0.5);
}

@media (hover: hover) {
    .media-nav .songs li:hover {
        color: white;
    }
}

/* Hide scrollbar for Webkit browsers (Chrome, Safari) */
.media-nav::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* Hide scrollbar for IE, Edge, and Firefox */
.media-nav {
    /* IE and Edge */
    -ms-overflow-style: none;
    /* Firefox */
    scrollbar-width: none;
}