@keyframes rotating {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(90deg); }
    50% { transform: rotate(180deg); }
    75% { transform: rotate(270deg); }
    100% { transform: rotate(360deg); }
}

@keyframes playing {
    0% { transform: rotate(0deg); box-shadow: 0 0 0 0 rgba(var(--theme_rgb), 0); }
    25% { transform: rotate(90deg); box-shadow: 3px 3px 36px 12px rgba(var(--theme_rgb), 0.5); }
    50% { transform: rotate(180deg); box-shadow: 0 0 0 0 rgba(var(--theme_rgb), 0); }
    75% { transform: rotate(270deg); box-shadow: 3px 3px 36px 12px rgba(var(--theme_rgb), 0.5); }
    100% { transform: rotate(360deg); box-shadow: 0 0 0 0 rgba(var(--theme_rgb), 0); }
}

/* player */
.player {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    width: 76%;
    margin: 75px auto;
}

/* display */
.player .display {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;

    width: 100%;
    height: 400px;
    margin-bottom: 50px;
    box-sizing: border-box;
}

.player .display .turntable {
    flex-shrink: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;

    width: 400px;
    height: 400px;
    margin-right: 80px;
    border-radius: 400px;
    overflow: hidden;
}

.player.playing .display .turntable {
    animation: playing 12s linear infinite;
}

.player .display .turntable .tape {
    width: 410px;
}

.player .display .turntable .cover {
    display: flex;
    justify-content: center;
    align-items: center;

    position: absolute;
    top: 50%;
    left: 50%;

    width: 230px;
    height: 230px;
    border-radius: 230px;

    transform: translate(-50%, -50%);
    overflow: hidden;
}

.player .display .turntable .cover img {
    height: 100%;
}

.player .display .info {
    width: 50%;
}

.player .display .info .title {
    margin-bottom: 20px;

    color: rgb(var(--theme_rgb));
    font-size: 22px;
}

.player .display .info .lyrics {
    height: calc(100% - 50px);
    box-sizing: border-box;
    
    line-height: 30px;
    color: rgb(var(--secondarytxt_rgb));
    overflow: auto;
}

.player .display .info .lyrics #vsb_content {
    padding: 110px 0 170px 0;
}

.player .display .info .lyrics audio {
    width: 0;
    height: 0;
    visibility: 0;
}

/* hidden video tag */
.player video {
    height: 0;
    visibility: hidden;
}

/* controls */
.player .controls {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    width: calc(480px + 50%);
    height: 42px;
    padding: 0 15px;
    border-radius: 15px;
    background-color: white;
    box-sizing: border-box;

    user-select: none;
}

/* buttons */
.player .controls a {
    display: flex;
    justify-content: center;
    align-items: center;
}

.player .controls button {
    flex-shrink: 0;
    outline: none;
    border: none;

    width: 25px;
    height: 15px;

    background-color: transparent;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;

    cursor: pointer;
}

.player .controls button:disabled {
    cursor: not-allowed;
}

.player .controls button.prev {
    background-image: url(../assets/images/prev_btn_ico.png);
}
.player .controls button.next {
    background-image: url(../assets/images/next_btn_ico.png);
}

.player .controls button.play {
    margin: 0 14px;
    background-image: url(../assets/images/play_btn_ico.png);
    transform: translateX(10%);
}
.player.loading .controls button.play {
    background-image: url(../assets/images/play_btn_loading_ico.png);
    animation: rotating 0.8s linear infinite;
    transform: translateX(0);
}
.player.playing .controls button.play {
    background-image: url(../assets/images/play_btn_playing_ico.png);
    transform: translateX(0);
}

.player .controls button.download {
    width: 19px;
    height: 17.5px;
    background-image: url(../assets/images/download_btn_ico.png);
}

/* progress */
.player .controls .progress {
    width: 50%;
    height: 4.5px;
    margin-left: 30px;
    margin-right: 15px;
    border-radius: 4.5px;
}

/* duration */
.player .controls .duration {
    margin-right: 25px;

    color: rgb(var(--secondarytxt_rgb));
    font-size: 13.5px;
}

/* volume */
.player .controls .volume {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    width: 18%;
    margin-right: 25px;
}

.player .controls .volume button {
    height: 18px;
    margin-right: 12px;
    background-image: url(../assets/images/volume_ico.png);
}
.player.mute .controls .volume button {
    height: 19px;
    background-image: url(../assets/images/mute_ico.png);
}

.player .controls .volume .range {
    width: 80%;
    height: 4.5px;
    border-radius: 4.5px;
    background-color: rgba(0, 0, 0, 0.1);
}