/*
 * Copyright 2019 Ivo Woltring <WebMaster@ivonet.nl>
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@import url('https://fonts.googleapis.com/css?family=VT323');

:root {
    --vt-font-family: 'Inconsolata', monospace;
    --vt-font-size: 23px;

    --vt-margin: 25px;
    --vt-padding: 5px;

    --vt-border: 3px solid lightgreen;

    --vt-background-color: black;
    --vt-color: lightgreen;
    --vt-color-link: lightblue;
}

* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}

body {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: slategray;
}

.ivonet-terminal {

    width: calc(100% - 2 * var(--vt-margin));
    height: calc(100% - 2 * var(--vt-margin));

    margin: var(--vt-margin);
    padding: var(--vt-padding);

    border: var(--vt-border);

    background-color: var(--vt-background-color);
    color: var(--vt-color);

    font-family: var(--vt-font-family);
    font-size: var(--vt-font-size);

    overflow-y: scroll;
}

.ivonet-terminal * {
    float: left;
}

.ivonet-terminal a {
    float: none;
    color: var(--vt-color-link);
    cursor: pointer;
    text-decoration: none;
}



.ivonet-terminal-output-container {
    width: 100%;
}

.ivonet-terminal-output-container li {
    list-style: none;
    text-decoration: none;
    width: 100%;
    padding: var(--vt-padding);
    padding-top: 0;
    padding-bottom: 0;
}

.ivonet-terminal-output-container li pre {
    width: 100%;
    padding: 0;
}

.ivonet-terminal-output-container li pre span {
    width: 100%;
    font-family: var(--vt-font-family);
    font-size: var(--vt-font-size);
    white-space: pre;
}

.ivonet-terminal-input-container {
    width: 100%;

    display: flex;
    flex-direction: row;

    justify-content: flex-start;
}

.ivonet-terminal-prefix {
    padding: var(--vt-padding);
    padding-top: 0;
    padding-bottom: 0;

    flex-shrink: 1;
}

.ivonet-terminal-input {
    border: 0;
    outline: none;

    background: transparent;

    font-family: var(--vt-font-family);
    font-size: var(--vt-font-size);
    color: transparent;
    text-shadow: 0 0 0 var(--vt-color);

    padding: 0;
    margin: var(--vt-padding);
    margin-top: 0;
    margin-bottom: 0;
}

.focused {
    border-right: 10px solid var(--vt-color);
}

pre {
    font-family: 'Inconsolata', monospace;
}