/* views/css/barcodescanner.css */
#scanner-preview {
    width: 100%;
    height: auto;
    position: relative;
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

#loading, #loadingProduct {
    height: 24px;
    width: 24px;
    margin: 0 auto;
    animation: spin 2s infinite linear;
}

#loadingProduct {
    position: absolute;
    top: 50%;
    left: 50%;
}

.scanner-frame {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.scanner-frame svg {
    height: 100%;
    width: 100%;
}

#barcodeScannerModal {
    z-index: 99999999;
    background: #00000087;
}

#open-scanner-btn {
    position: absolute;
    height: 100%;
    padding: 9px;
    right: 40px;
    top: 50%;
    z-index: 999;
    transform: translateY(-50%);
    transition: right 0.2s ease-out;
}

#open-scanner-btn svg {
    height: 100%;
    width: auto; 
}

.has-value #open-scanner-btn {
    right: 74px;
}