/* ============================================
   Scrubbable Inputs (Procreate Style)
   ============================================ */

.scrub-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.scrub-input-wrapper input[type="number"] {
    padding-left: 24px !important;
    /* Make room for the label */
    padding-right: 4px;
    width: 100%;
    min-width: 0;
}

.scrub-label {
    position: absolute;
    left: 4px;
    z-index: 2;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: monospace;
    color: var(--text-muted);
    cursor: ew-resize;
    /* East-West resize cursor */
    user-select: none;
    padding: 2px 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
    touch-action: none;
}

.scrub-label:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.scrub-label:active {
    background: var(--accent-primary);
    color: white;
    cursor: grabbing;
}

/* Axis Colors */
.scrub-label.axis-x {
    color: #ff6b35;
    /* Orange-Red */
}

.scrub-label.axis-y {
    color: #4cd964;
    /* Green */
}

.scrub-label.axis-z {
    color: #007aff;
    /* Blue */
}

/* Hover states for axis */
.scrub-label.axis-x:hover {
    color: #ff9f0a;
    transform: scale(1.1);
}

.scrub-label.axis-y:hover {
    color: #32d74b;
    transform: scale(1.1);
}

.scrub-label.axis-z:hover {
    color: #64d2ff;
    transform: scale(1.1);
}