/*var(--bs-app-theme)*/

pre {
  /*background: #2e2e2e;*/
  /*border-left: 5px solid var(--bs-app-theme);*/
  /*padding: 5px;*/
  /*margin-left: 2px;*/
  
  background-color: var(--bs-app-header-input-bg) !important;
    color: var(--bs-body-color);             /* Light text color */
    padding-left: 0px;
    border-radius: 5px;
    overflow-x: auto !important;
    font-family: "Courier New", Courier, monospace;
    /*line-height: 1.0;*/
    font-size: 0.9rem;
  
}
code {
    background-color: var(--bs-app-header-input-bg) !important;
    color: var(--bs-body-color);             /* Slightly reddish color */
    padding: 2px 4px;           /* Padding for better readability */
    border-radius: 4px;         /* Rounded corners */
    font-family: "Courier New", Courier, monospace; /* Monospaced font */
    font-size: 0.95em;          /* Slightly smaller font size */
}

/* Target the code element inside the pre element */
pre code {
    color: inherit; /* Inherit the color from the parent */
    background: none; /* Remove the default background */
}

/* Syntax highlighting */
.token.comment { color: #75715e; font-style: italic; }
.token.keyword { color: #66d9ef; }
.token.string { color: #e6db74; }
.token.function { color: #a6e22e; }
.token.variable { color: #f92672; }

/* Code container styling */
.code-container {
    position: relative;
    display: inline-block;
    width:100%;
    direction: ltr;
    text-align: left;
}
/* Styling the copy button */
.copy-btn {
    position: absolute;
    top: 10px;         /* Adjust to position the button properly */
    right: 10px;       /* Adjust as necessary */
    background: var(--bs-app-theme);
    border: none;
    padding: 5px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 4px;
    display: none;    /* Hide by default */
    opacity: 0.8;
    transition: opacity 0.2s;
}
.copy-btn:hover {
    opacity: 1;       /* Full opacity on hover */
    transition: 1s;
}

/* Show the button when hovering over the code container */
.code-container:hover .copy-btn {
    display: block;
    transition: 1s;
}

.code-with-line-numbers {
    display: block;
    position: relative;
    
    counter-reset: line;
    white-space: pre;   /* Preserve whitespace */
}

/* Line numbers styling */


.line-number {
    display: inline-block;
    width: 30px;
    text-align: right;
    color: #999;
    margin-right: 10px;
    padding-right: 10px;
    border-right: 1px solid var(--bs-border-color);
    user-select: none; /* Prevents text selection */
    pointer-events: none; /* Disables mouse events */
}