/* Monokai (Sublime) theme for MicroBin. Loaded via MICROBIN_CUSTOM_CSS, which REPLACES water.css, so import it first. */
@import url("https://bin.rapt.one/static/water.css");

:root {
  --background-body: #272822;
  --background: #1e1f1c;
  --background-alt: #3e3d32;
  --selection: rgba(249, 38, 114, .35);
  --text-main: #f8f8f2;
  --text-bright: #ffffff;
  --text-muted: #75715e;
  --links: #66d9ef;
  --focus: #f92672;
  --border: #49483e;
  --code: #a6e22e;
  --animation-duration: .1s;
  --button-base: #3e3d32;
  --button-hover: #49483e;
  --scrollbar-thumb: #75715e;
  --scrollbar-thumb-hover: #f92672;
  --form-placeholder: #75715e;
  --form-text: #f8f8f2;
}
html, body { background: #272822; color: #f8f8f2; }
body { font-family: ui-monospace, Menlo, Consolas, "DejaVu Sans Mono", monospace; }
a { color: #66d9ef; } a:hover { color: #a6e22e; }
button, input[type=submit], input[type=button], .small-button { background: #3e3d32; color: #f8f8f2; border: 1px solid #49483e; border-radius: 4px; }
button:hover, input[type=submit]:hover, .small-button:hover { border-color: #f92672; color: #fff; }
input, textarea, select { background: #1e1f1c; color: #f8f8f2; border: 1px solid #49483e; border-radius: 4px; }
input:focus, textarea:focus, select:focus { border-color: #f92672; outline: none; }
pre, code { background: #1e1f1c; color: #f8f8f2; border: 1px solid #3e3d32; border-radius: 4px; }
pre code { border: 0; }
hr { border-color: #3e3d32; }

/* MicroBin colors code on the server with fixed inline colors (a light GitHub-like theme); remap them to Monokai */
code-line span { font-weight: normal !important; }
code-line span[style*="#a71d5d"] { color: #f92672 !important; }   /* keywords */
code-line span[style*="#0086b3"] { color: #ae81ff !important; }   /* numbers, constants */
code-line span[style*="color:blue"] { color: #e6db74 !important; } /* strings */
code-line span[style*="#183691"] { color: #e6db74 !important; }   /* string literals */
code-line span[style*="#63a35c"], code-line span[style*="#62a35c"] { color: #a6e22e !important; } /* tags, names */
code-line span[style*="#795da3"] { color: #a6e22e !important; }   /* functions, types */
code-line span[style*="#ed6a43"] { color: #fd971f !important; }   /* escapes, params */
code-line span[style*="#969896"] { color: #75715e !important; }   /* comments */
code-line span[style*="#323232"] { color: #f8f8f2 !important; }   /* identifiers */

/* logo: the PNG is a light-background box, swap it for a text mark */
#nav img { display: none; }
#nav b a::before { content: "μ bin"; color: #a6e22e; font-size: 1.3rem; font-weight: 700; letter-spacing: .08em; }
#nav b a:hover::before { color: #f92672; }
/* Save + file-drop accents */
#submit-button, input[type=submit] { background: #f92672 !important; color: #f8f8f2 !important; border: 1px solid #f92672 !important; }
#submit-button:hover, input[type=submit]:hover { background: #a6e22e !important; border-color: #a6e22e !important; color: #272822 !important; }
#attach-file-button-label { border-color: #66d9ef !important; color: #66d9ef; }
#attach-file-button-label:hover { border-color: #f92672 !important; color: #f92672; }