/* ==================================================

	Drag arrows

================================================== -->

.drag-arrows {
	position: absolute;
	inset: 0;

	pointer-events: none;
}

/* invisible buttons must not catch the pointer, or they swallow the press that starts a drag */
.drag-arrows:not(:focus-within) {
	opacity: 0;
}

.drag-arrows:not(:focus-within) .drag-arrows__arrow {
	pointer-events: none;
}

.drag-arrows__arrow {
	position: absolute;

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

	width: 26px;
	height: 26px;

	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 6px;
	background-color: rgba(0, 0, 0, 0.65);

	color: var(--white);
	pointer-events: auto;
}

.drag-arrows__arrow svg {
	width: 10px;
	height: 10px;
}

/* inset by the scoop clip vars, else an arrow past an inset is clipped away; 0% fallback for draggables with none */
.drag-arrows__arrow--up {
	top: calc(var(--scoop-top, 0%) + 4px);
	left: 50%;

	margin-left: -13px;
}

.drag-arrows__arrow--down {
	bottom: calc(var(--scoop-bottom, 0%) + 4px);
	left: 50%;

	margin-left: -13px;
}

.drag-arrows__arrow--left {
	left: calc(var(--scoop-left, 0%) + 4px);
	top: 50%;

	margin-top: -13px;
}

.drag-arrows__arrow--right {
	right: calc(var(--scoop-right, 0%) + 4px);
	top: 50%;

	margin-top: -13px;
}

/* -------------------------------------
	=Mobile

	display, not opacity, so the buttons leave the tab order too
------------------------------------- */

@media ( max-width: 1076px ) {

	.drag-arrows {
		display: none;
	}

}