:root .Root__top-container {

	// Cover-art
	.main-nowPlayingWidget-nowPlaying {
		height: 0;
		z-index: 1;
		left: var(--cover-art-left);

		.main-coverSlotCollapsed-container {
			bottom: var(--cover-art-bottom);
			border-radius: var(--cover-art-radius);

			>div button {
				border-radius: var(--cover-art-radius) !important;
				background: none;
			}

			.cover-art,
			.VideoPlayer__container video {
				width: var(--cover-art-width) !important;
				height: var(--cover-art-height) !important;
				border-radius: var(--cover-art-radius);
				overflow: hidden;
				object-fit: cover;
				max-height: none;
				max-width: none;
			}
		}
	}
}

:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container {
	.Root__now-playing-bar {
		.main-nowPlayingBar-container {
			position: relative;
			border-top: none;
			flex-direction: column-reverse !important;
			background-clip: text;

			&::before {
				z-index: auto !important;
			}

			&:has(.main-connectBar-connectBar)::before {
				height: calc(100% - 40px);
				top: 40px;
			}

			.main-nowPlayingBar-nowPlayingBar {
				margin-bottom: 12px;

				// Center
				.main-nowPlayingBar-center {

					// Player Controls
					.player-controls__buttons--new-icons {
						margin-bottom: 0px !important;
					}

					// Playback Area
					.playback-bar {
						position: fixed;
						display: grid;
						grid-template-columns: auto auto;
						grid-template-areas:
							"time-left time-right"
							"bar bar";
						bottom: 0;
						right: 0;
						gap: 0;

						.saber-hilt {
							height: 0;
						}

						// Timers
						&>div:not(.playback-progressbar-container) {
							text-align: center;

							&:first-of-type {
								grid-area: time-left;
							}

							&:last-of-type {
								grid-area: time-right;
							}
						}

						// Progess Bar
						.playback-progressbar-container {
							display: contents;
						}

						.playback-progressbar {
							grid-column: 1/3;
							grid-area: bar;
							height: 11px;

							.progress-bar {
								--bg-color: rgba(var(--spice-rgb-progress-bg), 0.5);
								--fg-color: var(--spice-progress-fg);
								--progress-bar-height: 12px;
								--progress-bar-radius: 0;

								.x-progressBar-fillColor {
									width: 107%;
									background-color: transparent;
									background-image: linear-gradient(90deg, var(--spice-progress-fg) 93%, transparent 100%);
								}

								.progress-bar__slider {
									display: none;
								}
							}
						}
					}
				}

				// Right
				.main-nowPlayingBar-right {

					// Volume Bar
					.main-nowPlayingBar-volumeBar .progress-bar {
						--bg-color: rgba(var(--spice-rgb-progress-bg), 0.5);
					}

					// Miscolored right side button svgs
					.main-nowPlayingBar-extraControls {
						button:not(.main-genericButton-buttonActive) {
							color: rgba(var(--spice-rgb-selected-row), 0.7);

							&:hover {
								color: var(--spice-text) !important;
							}
						}

						.main-devicePicker-indicator {
							display: none;
						}
					}
				}

			}

		}
	}
}