:root {
    background-color: #f0f0ea;
    background-image: linear-gradient(#e0e0da, #f0f0ea 400px);
    background-image: linear-gradient(#e0e0da, #f0f0ea 50vh);
    background-repeat: no-repeat;
    color: #202020;
    height: 100%;
}

:root::before {
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0.3;
    z-index: -1;
    display: block;
}

:root, button {
    line-height: 1.4;
}

:root, button, label {
    font-family: sans-serif;
    font-size: 1rem;
}

.message {
    color: #999;
    font-style: italic;
}

.error {
    font-weight: bold;
    color: #931;
}

/* #971 works well enough on light or dark, but #931 is just a bit too icky on Solarized Dark */
.ace_dark .error {
    color: #a42;
}

.ace_dark :link {
    color: #77f;
}

.ace_dark :visited {
    color: #f7f;
}

.ace_dark :link:active,
.ace_dark :visited:active {
    color: #f77;
}

.shortening-link {
    color: rgba(127, 127, 255, 0.5);
    position: relative;
    letter-spacing: -1ex;
    -webkit-animation: scrunch-letters 2s;
    -ms-animation: scrunch-letters 2s;
    -o-animation: scrunch-letters 2s;
    animation: scrunch-letters 2s;
}

.ace_dark .shortening-link {
    color: rgba(127, 127, 255, 0.25);
}

@-webkit-keyframes scrunch-letters {
    0% { letter-spacing: 0; }
    10% { letter-spacing: 0; }
}

@-o-keyframes scrunch-letters {
    0% { letter-spacing: 0; }
    10% { letter-spacing: 0; }
}

@keyframes scrunch-letters {
    0% { letter-spacing: 0; }
    10% { letter-spacing: 0; }
}

.shortening-link::before {
    content: "shrinking…";
    font-style: italic;
    position: absolute;
    color: #666;
    letter-spacing: 0;
}

.ace_dark .shortening-link::before {
    color: #999;
}

/*
@media screen and (min-width: 1000px) {
    #control::before {
        content: "Rust Playground";
        font-size: 2.0em;
        display: inline-block;
        vertical-align: middle;
        margin-right: 0.5em;
    }
}
*/

#evaluate::after {
    content: '▶';
    margin-left: 8px;
}

#control > div {
    margin-right: 0.5em;
}

#gist { /* The last of the buttons, put in a little more space */
    margin-right: 0.5em;
}

button:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-left-width: 1px;
}

button:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

button {
    color: #333;
    background-color: #fff;
    border: 1px solid rgba(153, 153, 153, 0.5);
    border-left-width: 0;
    padding: 0.25em 0.5em;
    vertical-align: middle;
    cursor: pointer;
    outline: 0;
}

button::-moz-focus-inner {
    border: 0;
}

label {
    cursor: pointer;
}

button:hover, button:focus, button:active {
    background: #ebebeb;
}

button.primary {
    color: #fff;
    background-color: #a42;
    border-width: 0;
    font-size: 1.4em;
    border-radius: 4px;
}

button.primary:hover, button.primary:focus, button.primary:active {
    background-color: #931;
}

#control > * {
    line-height: 1.4;
    display: inline-block;
    vertical-align: middle;
}

.radios {
    position: relative;
}

.radios > :first-child {
    position: absolute;
    cursor: default;
    left: 4px;
    right: 4px;
    border-radius: 4px 4px 0 0;
    top: -1.4em;
    font-size: 0.8em;
    text-align: center;
    background: rgba(255, 255, 255, 0.5);
}

.radios > :last-child {
    white-space: nowrap;
    background: #fff;
    border-radius: 4px;
}

#configure-editor {
    line-height: 0;
    padding: 0.25em;
    border-radius: 4px;
    /* Because it’s a button some superfluous width seems to get inserted in Firefox, dunno why. */
    width: 16px;
    box-sizing: content-box;
}

.right-c-e {
    /* Because of float: right we can’t use vertical-align: middle and so compensate manually */
    float: right;
    margin-top: 1.25em;
}

#configure-editor span {
    background: url("data:image/svg+xml,%3C?xml version='1.0' standalone='no'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' version='1.1'%3E%3Cpath fill='%23a42' stroke='%23931' stroke-width='1' d='M 7,0.5 6.5,1 6.5,3 6,3.5 5.5,3.5 4,2 3,2 2,3 2,4 3.5,5.5 3.5,6 3,6.5 1,6.5 0.5,7 l 0,2 0.5,0.5 2,0 0.5,0.5 0,0.5 -1.5,1.5 0,1 1,1 1,0 1.5,-1.5 0.5,0 0.5,0.5 0,2 0.5,0.5 2,0 0.5,-0.5 0,-2 0.5,-0.5 0.5,0 1.5,1.5 1,0 1,-1 0,-1 -1.5,-1.5 0,-0.5 0.5,-0.5 2,0 L 15.5,9 15.5,7 15,6.5 13,6.5 12.5,6 12.5,5.5 14,4 14,3 13,2 12,2 10.5,3.5 10,3.5 9.5,3 9.5,1 9,0.5 Z m 1,5 c 1.5,0 2.5,1 2.5,2.5 0,1.5 -1,2.5 -2.5,2.5 C 6.5,10.5 5.5,9.5 5.5,8 5.5,6.5 6.5,5.5 8,5.5 Z'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    width: 16px;
    height: 16px;
    text-indent: -999em;
    display: inline-block;
    overflow: hidden;
}

.dropdown {
    display: none;
    position: absolute;
    right: 0em;
    margin-top: 1em;
    z-index: 100;
    background: #fff;
    border: 1px solid #bbb;
    border-radius: 4px;
    padding: 0 1em;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.dropdown::before {
    content: "";
    border-left: 1px solid #bbb;
    border-top: 1px solid #bbb;
    position: absolute;
    width: 1em;
    height: 1em;
    right: 0.8em;
    top: -1em;
    background-color: white;
    transform: translateY(0.414214em) rotate(45deg);
}

.radios label:first-of-type {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.radios label:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-right-width: 1px;
}

.radios label {
    color: #333;
    background: rgba(170, 68, 34, 0.1);
    transition: 0.2s background;
    border: 1px solid rgba(170, 68, 34, 0.4);
    border-right-width: 0;
    padding: 0.25em 0.5em;
    display: inline-block;
}

.radios label:hover,
.radios :focus + label,
.radios :active + label {
    background: rgba(170, 68, 34, 0.4);
}

input[type=radio] {
    /* TODO: this should keep tab indexing, but for some reason it’s not working */
    position: absolute;
    visibility: hidden;
}

input[type=radio]:checked + label {
    background: rgba(170, 68, 34, 0.5);
    border-right-width: 1px;
}

input[type=radio]:checked + label + input + label {
    border-left-width: 0;
}

input[type=radio]:checked + label:hover,
input[type=radio]:checked:focus + label,
input[type=radio]:checked:active + label {
    background: rgba(170, 68, 34, 0.7);
    border-right-width: 1px;
}

input[type=radio]:checked + label:hover + input + label,
input[type=radio]:checked:focus + label + input + label,
input[type=radio]:checked:active + label + input + label {
    border-left-width: 0;
}

#editor, pre {
    font-size: 11pt;
    font-family: Source Code Pro, monospace;
}

#editor {
    border: 3px solid rgba(153, 153, 153, 0.5);
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
}

#result {
    overflow: auto;
    border: 3px solid rgba(153, 153, 153, 0.5);
    border-top: 0;
    border-radius: 0 0 5px 5px;
}

#result > button:hover,
#result > button:focus,
#result > button:active {
    opacity: 0.75;
}

#result > button {
    background: none;
    border: none;
    color: #000;
    opacity: 0.4;
    font-weight: bold;
    position: absolute;
    top: 0;
    right: 0;
}

#result.ace_dark > button {
    color: #fff;
}

#result > div {
    padding: 0 1em;
}

#result:not([data-empty]) {
    border-top: 3px solid rgba(153, 153, 153, 0.5);
}

button[disabled] {
    position: relative;
}

button[disabled]::before {
    content: "";
    position: absolute;
    bottom: -1px;
    left: -1px;
    right: -1px;
    height: 4px;
    background: #931;
    opacity: 0;
    -webkit-animation: throb 1s infinite alternate ease-in-out;
    -ms-animation: throb 1s infinite alternate ease-in-out;
    -o-animation: throb 1s infinite alternate ease-in-out;
    animation: throb 1s infinite alternate ease-in-out;
}

button[disabled]:first-child::before {
    border-bottom-left-radius: 4px;
}

button[disabled]:last-child::before {
    border-bottom-right-radius: 4px;
}

.primary[disabled]::before {
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0 0 4px 4px;
    background: rgba(255, 255, 255, 0.5);
}

@-webkit-keyframes throb {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}

@-o-keyframes throb {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}

@keyframes throb {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Layout stuff. Absolute positioning is easiest, I must confess. We could get all fancy with flexbox if we wanted to. */

#control, #editor, #result {
    position: absolute;
    box-sizing: border-box;
    width: initial;
    width: unset;
    height: initial;
    height: unset;
    margin: initial;
    margin: unset;
    left: 16px;
    right: 16px;
}

#control {
    line-height: 4; /* For if it flows onto multiple lines, so the absolutely positioned radio label doesn’t hit the line above (the line-height is reset to 1.4 in the child) */
    top: 0.7em;
    /* Actual height: 64px; */
}

#editor {
    top: 82px; /* 81.6px = 64px (#control height) + 0.7em (#control top) + 0.4em (extra spacing between) @ 1em = 16px */
    bottom: 30%;
}

#result {
    top: 70%;
    bottom: 1em;
}

#result[data-empty] {
    bottom: initial;
    bottom: unset;
}

@supports (display: flex) {
    /* The position: absolute approach is mostly OK, but flex is better. */

    #control, #editor, #result {
        position: relative;
        left: initial;
        left: unset;
        right: initial;
        right: unset;
        top: initial;
        top: unset;
        bottom: initial;
        bottom: unset;
    }

    body {
        display: flex;
        flex-flow: column;
        height: 100%;
        box-sizing: border-box;
        padding: 1em;
        margin: 0;
    }

    #control {
        flex: 0 0 auto;
        margin-top: -0.3em;
        margin-bottom: 0.4em;
    }

    main {
        flex: 1;
        display: flex;
        flex-flow: column;
        border: 3px solid rgba(153, 153, 153, 0.5);
        border-radius: 5px;
        overflow-y: auto;
        height: 100%;
    }

    #editor, #result {
        border: none;
    }

    #editor {
        flex: 1 60%;
        border-radius: 2px 2px 0 0;
    }

    #result {
        flex: 1 40%;
        border-radius: 0 0 2px 2px;
    }

    #result[data-empty] {
        display: none;
    }
}

/* 1600px divided in two allows the editor to be about 80 characters wide */
@media screen and (min-width: 1600px) {
    /* At the time of writing, @media inside @supports was broken in Chromium; when the viewport width changed, it wouldn’t apply or remove the rules. So we invert the nesting thusly. *Sigh.* Webkit/Blink seem such toys compared with Gecko and Trident. */
    @supports (display: flex) {
        main {
            flex-flow: row;
        }

        #editor, #result {
            flex: 1 50%;
        }

        #result:not([data-empty]) {
            border-top: none;
        }

        #editor {
            border-radius: 2px 0 0 2px;
        }

        #result {
            border-left: 3px solid rgba(153, 153, 153, 0.5);
            border-radius: 0 2px 2px 0;
        }
    }
}

/* Overrides of theme styles to make their backgrounds semi-transparent so the page background and Rust logo show through somewhat. TODO: do these some better way.
 * The :root is to override specificity.
 * Colours are multiplied by 2 tackily (i.e. each channel of RGB separately, HSL would be more accurate) and opacity is halved. e.g. #e8e8e8ff becomes #d1d1d17f.
 * Those colours that that *really* didn’t seem right for retain their RGB values and gain a = 0.8.
 */
:root .ace-github { background: rgba(255, 255, 255, 0.5); }
:root .ace-github .ace_gutter { background: rgba(209, 209, 209, 0.5); }
:root .ace-github.ace_focus .ace_marker-layer .ace_active-line { background: rgba(255, 255, 153, 0.5); }
:root .ace-github .ace_marker-layer .ace_active-line { background: rgba(235, 235, 235, 0.5); }
:root .ace-github .ace_marker-layer .ace_selection { background: rgba(107, 171, 255, 0.5); }
:root .ace-github .ace_marker-layer .ace_step { background: rgba(255, 255, 0, 0.8); }
:root .ace-github .ace_marker-layer .ace_stack { background: rgba(164, 229, 101, 0.8); }
:root .ace-github .ace_marker-layer .ace_selected-word { background: rgba(245, 245, 255, 0.5); }
:root .ace-github .ace_print-margin { background: rgba(209, 209, 209, 0.5); }

/* rustc output. bright versions of red, yellow, green, cyan and magenta are used, but black, blue and gray could theoretically be added with dim versions of them. */
.rustc-output {
    white-space: pre-wrap;
    padding-bottom: 1em;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.25);
}

a.linejump {
    cursor: pointer;
    color: #97248D;
    border-bottom: thin #97248D dotted;
}

.ace_dark .rustc-output {
    border-bottom-color: rgba(255, 255, 255, 0.25);
}

.rustc-output:last-child {
    border-bottom: none;
    padding-bottom: none;
}

.ansi-red     { color: #a00; }
.ansi-green   { color: #0a0; }
.ansi-yellow  { color: #980; }
.ansi-magenta { color: #a0a; }
.ansi-cyan    { color: #096; }
.ace_dark .ansi-red     { color: #f55; }
.ace_dark .ansi-green   { color: #5f5; }
.ace_dark .ansi-yellow  { color: #ff5; }
.ace_dark .ansi-magenta { color: #f5f; }
.ace_dark .ansi-cyan    { color: #5ff; }