:root {
    /* These variables are specific for this tool only, so no need to global variables */
    --codemirror-line-number-track-color: #cbcbcb;
}

/* --colors-red-500-40: hsl(0deg 90% 60% / 0.4); */

/* Mergely Container Styles */
#mergely-container {
    min-height: 500px;
    width: 100%;
    border: 1px solid #e1e4e8;
    overflow: hidden;
    background: white;
}

#mergely-diff {
    height: 100%;
    width: 100%;
}

#mergely-splash {
    display: none !important;
}

.CodeMirror {
    font-family: Satoshi !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    height: 100% !important;
    border: none !important;
}


.mergely.current.CodeMirror-linenumber {
    background-color: var(--codemirror-line-number-track-color);
}

.merge-button {
    display: none; /* Initially hide the merge buttons, and dynamically making it visible */
}



/* Mobile responsive styles */
@media (max-width: 768px) {
    #mergely-container {
        min-height: 300px; /* Smaller height for tablets */
    }
}

@media (max-width: 480px) {
    #mergely-container {
        min-height: 250px; /* Even smaller height for mobile phones */
    }
}