/* Buffer Control styles (BEM) */
.buffer {
	width: 100%;
}

.buffer-visualization {
	position: relative;
	width: 100%;
	height: 3.75rem;
	background: var(--color-white-alpha-10);
	border-radius: var(--spacing-4);
	cursor: pointer;
	user-select: none;
	padding-left: var(--spacing-48);
	box-sizing: border-box;
}

.buffer-playhead {
	position: absolute;
	left: var(--spacing-48);
	top: 0;
	bottom: 0;
	width: var(--spacing-2);
	background: var(--color-white);
	z-index: 3;
}

.buffer-track {
	display: flex;
	align-items: center;
	position: absolute;
	left: var(--spacing-48);
	right: 0;
	height: var(--spacing-24);
}

.buffer-track--video {
	top: var(--spacing-4);
}

.buffer-track--audio {
	top: var(--spacing-32);
}

.buffer-track-label {
	position: absolute;
	left: -2.875rem;
	width: 2.5rem;
	font-size: 0.625rem;
	color: var(--color-white-alpha-70);
	text-align: right;
	padding-right: var(--spacing-4);
	pointer-events: none;
	box-sizing: border-box;
}

.buffer-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.buffer-target-area {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--spacing-48);
	right: 0;
	pointer-events: none;
}

.buffer-target-line {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 0.1875rem;
	background: var(--color-orange-400, var(--color-orange-450));
	z-index: 2;
	cursor: ew-resize;
	border-radius: var(--spacing-1);
	pointer-events: auto;
}

.buffer-target-label {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	font-size: 0.6875rem;
	font-weight: 500;
	color: var(--color-orange-400, var(--color-orange-450));
	white-space: nowrap;
	margin-bottom: var(--spacing-2);
	opacity: 0;
	transition: opacity 0.15s ease;
	pointer-events: none;
}

.buffer-visualization:hover .buffer-target-label,
.buffer-visualization--dragging .buffer-target-label {
	opacity: 1;
}

.buffer-help {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 0.75rem;
	color: var(--color-white-alpha-30, rgba(255, 255, 255, 0.3));
	pointer-events: none;
	white-space: nowrap;
}
