@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

:root {
    --color-bg: hsl(0, 0%, 12%);
    --color-tx: hsl(0, 0%, 82%);
}

body {
    background: var(--color-bg);
    padding: 0;
    margin: 0;
}

.EasyMDEContainer * {
    font-family: "JetBrains Mono", monospace;
    color: var(--color-tx);
    font-size: 16px;
    font-weight: 400;
}

.EasyMDEContainer .editor-toolbar,
.EasyMDEContainer .CodeMirror {
    border: none;
}

.EasyMDEContainer .CodeMirror {
    padding: 0;
}

.EasyMDEContainer .CodeMirror-wrap,
.EasyMDEContainer .editor-toolbar,
.EasyMDEContainer .editor-preview {
    background: var(--color-bg) !important;
}

/* Selected text */
.CodeMirror-selected {
    background-color: hsl(0, 0%, 30%) !important;
    border-radius: 2px;
}

/* Caret cursor */
.CodeMirror-cursor {
    border-left: 2px solid hsla(0, 0%, 100%, 0.8);
}

/* Hide the "lineNumbers" */
.EasyMDEContainer .CodeMirror-wrap .CodeMirror-gutters,
.EasyMDEContainer .CodeMirror-wrap .CodeMirror-gutter-wrapper {
    opacity: 0;
}

/* The small leftbar when hovering a line */
.EasyMDEContainer .CodeMirror-wrap .CodeMirror-lines .CodeMirror-line::before {
    content: "";
    width: 5px;
    left: -0.6rem;
    top: 0;
    height: 100%;
    background: transparent;
    position: absolute;
    border-radius: 999px;
    transition: all ease 0.1s;
}

.EasyMDEContainer .CodeMirror-wrap .CodeMirror-lines .CodeMirror-line:hover::before {
    background: hsla(0, 0%, 50%, 0.35);
}

/* ---------- Toolbar's buttons ---------- */
.EasyMDEContainer .editor-toolbar {
    display: flex;
    justify-content: center;
}

.EasyMDEContainer .editor-toolbar button {
    border: none;
}

.EasyMDEContainer .editor-toolbar button *,
.EasyMDEContainer .editor-toolbar button *::before,
.EasyMDEContainer .editor-toolbar button *::after {
    color: var(--color-tx);
    /* font-family: FontAwesome; */
    /* font-size: 12px; */
    /* vertical-align: 0; */
}

.EasyMDEContainer .editor-toolbar button.active,
.EasyMDEContainer .editor-toolbar button:hover {
    background: hsla(0, 0%, 50%, 0.2);
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
    background: transparent;
    width: 12px;
    border-radius: 999px;
}

::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb {
    background: hsla(0, 0%, 50%, 0.2);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: hsla(0, 0%, 50%, 0.5);
}