@import "~scss/_mixins";

.input-drag-horizontal { height: 100%; position: relative; }
.input-drag-horizontal {
	.back { width: 100%; height: 4px; border-radius: 2px; background: var(--color-shape-secondary); position: absolute; top: 50%; left: 0px; margin-top: -2px; }
	.fill { height: 4px; border-radius: 2px; background: var(--color-control-accent); width: 0px; position: absolute; left: 0px; top: 50%; margin-top: -2px; }
	.icon { 
		width: 12px; height: 12px; border: 2px solid var(--color-control-accent); border-radius: 50%; position: absolute; left: 0px; top: 50%;
		transform: translateY(-50%); transition: none; cursor: grab;
	}
	.bullet { position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0px); }
}

.dragWrap { height: 24px; background: rgba(0,0,0,0.5); border-radius: 4px; padding: 0px 8px; display: flex; }
.dragWrap {
	.input-drag-horizontal { width: calc(100% - 38px); margin-right: 8px; }
	.number { width: 38px; @include text-common; flex-shrink: 0; line-height: 24px; color: var(--color-control-accent); font-weight: 500; text-align: right; }
}