_duration.sass

// From the sleek theme

// Shift up when connect bar is visible
.now-playing-bar-container > div:first-child:nth-last-child(2) .playback-bar,
.main-nowPlayingBar-container > div:first-child:nth-last-child(2) .playback-bar
	bottom: 107px

// Hide and move progress time location
.playback-bar__progress-time-elapsed
	opacity: 0
	position: absolute
	bottom: 13px
	text-align: center
	border-radius: 10px
	left: 5px
	transition-duration: 0.15s
	background-color: var(--spice-main)

.main-playbackBarRemainingTime-container
	opacity: 0
	position: absolute
	bottom: 13px
	text-align: center
	border-radius: 10px
	right: 5px
	transition-duration: 0.15s
	background-color: var(--spice-main)

// Background color
.progress-bar
	--bg-color: var(--spice-selected-row)

// Show time on hover
.playback-bar:hover .playback-bar__progress-time-elapsed,
.playback-bar:hover .main-playbackBarRemainingTime-container
	opacity: 1

// Move bar
.playback-bar
	width: 100%
	bottom: 80px 
	position: absolute

.player-controls__buttons
	transform: translateY(6px)
	align-items: center

// Change color
.playback-bar .progress-bar__fg
	background-color: var(--spice-playback-bar)

// No button on hover
.progress-bar__slider
	display: none

// Fix weird hover change on play button
.Button-buttonPrimary-useBrowserDefaultFocusStyle-data-is-icon-only:hover > span
	background-color: var(--spice-text) !important