.control-item.control-button {
	background-color: rgba(0, 0, 0, 0) !important;
}

#close, #unpip {
	fill: white !important;
	padding: 5px !important;
	top: 2px !important;

&:hover {
		&::after {
			display: none !important;
		}
	}
}

#close {
	left: auto !important;
	right: 5px !important;
}

#unpip {
	left: 5px !important;
	right: auto !important;
}

#controls {
	margin: 0 !important;
	height: 100% !important;
	width: 100% !important;

transition: background-color 160ms linear;

&:hover {
		background-color: rgba(0, 0, 0, 0.69) !important;
	}
}

#controls-bottom-gradient {
	display: none !important;
}

#controls-bottom {
	display: flex;
	flex-direction: column-reverse;
	bottom: 5px !important;
}

/* progress bar */
.scrubber-no-drag {
	display: flex !important;
	margin: 0 !important;
	height: 100% !important;
}

#scrubber::-moz-range-thumb {
	width: 0 !important;
	height: 0 !important;
	border: none !important;
}

#scrubber {
	height: 5px !important;
	transition: all 160ms linear !important;
	overflow: hidden;
	padding: 0 !important;
	border: 5px solid rgba(0, 0, 0, 0);

&:hover {
		height: 8px !important;
	}
}

#scrubber {
	&::-moz-range-track, &::-moz-range-progress {
		height: 100% !important;
	}
}