// Reset
*
    margin: 0
    padding: 0
    box-sizing: border-box

// Fonts
//  azertyuiopqsdfghjklmwxcvbnAZERTYUIOPQSDFGHJKLMWXCVBN<>,?!;.:/=+*$€£1234567890-_@#&'"“`%()[]<>éèêçàùÉÈÊÇÀÙôÔœ
@font-face
    font-family: 'Inconsolata'
    font-weight: normal
    font-style: normal
    src: url('/static/fonts/Inconsolata-Regular.woff2') format('woff2'), url('/static/fonts/Inconsolata-Regular.woff') format('woff')

@font-face
    font-family: 'Inconsolata'
    font-weight: normal
    font-style: italic
    src: url('/static/fonts/Inconsolata-Regular-Italic.woff2') format('woff2'), url('/static/fonts/Inconsolata-Regular-Italic.woff') format('woff')

@font-face
    font-family: 'Inconsolata'
    font-weight: bold
    font-style: normal
    src: url('/static/fonts/Inconsolata-Bold.woff2') format('woff2'), url('/static/fonts/Inconsolata-Bold.woff') format('woff')

@font-face
    font-family: 'Inconsolata'
    font-weight: bold
    font-style: italic
    src: url('/static/fonts/Inconsolata-Bold-Italic.woff2') format('woff2'), url('/static/fonts/Inconsolata-Bold-Italic.woff') format('woff')

// Body
body
    background: #27282d

// Textarea
.textarea
    display: none

// Button
.button
    position: absolute
    top: 20px
    right: 20px
    color: #fff
    font-size: 12px
    font-family: Helvetica, Arial
    padding: 10px
    display: none
    text-decoration: none
    border-radius: 2px
    z-index: 2

    .background
        display: block
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%
        background: #fff
        opacity: 0.2
        transition: opacity 0.3s
        will-change: opacity

    &:hover
        .background
            opacity: 0.25

// Controller
.controller
    position: absolute
    top: 0
    left: 0
    transform: translateX(700px) translateY(150px)
    z-index: 8
    will-change: transform

    .area
        position: absolute
        top: -25px
        left: -25px
        width: 50px
        height: 50px
        border-radius: 25px
        cursor: all-scroll

    .center
        position: absolute
        top: -15px
        left: -15px
        width: 30px
        height: 30px
        border-radius: 15px
        background: #fff
        opacity: 0.2
        cursor: all-scroll
        pointer-events: none

    .item
        position: absolute
        top: -15px
        left: -15px
        width: 30px
        height: 30px
        border-radius: 15px
        background: #444
        will-change: transform

// CodeMirror
.CodeMirror
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    background: none
    color: #dadada
    font-family: Inconsolata
    font-size: 14px
    letter-spacing: 1px
    line-height: 1.5em
    opacity: 1
    transition: opacity 0.15s

    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)
        -webkit-font-smoothing: antialiased
        -moz-osx-font-smoothing: grayscale

    @media (max-width: 500px)
        font-size: 13px

    @media (max-width: 400px)
        font-size: 12px

    &.locked
        opacity: 0.75

.CodeMirror .CodeMirror-lines
    padding-top: 52px
    padding-bottom: 100vh

    @media (max-width: 800px)
        padding-top: 36px

    @media (max-width: 500px)
        padding-top: 26px

    @media (max-width: 400px)
        padding-top: 16px

.CodeMirror .CodeMirror-line
    padding-left: 21px
    padding-right: 56px

    @media (max-width: 800px)
        padding-right: 36px
        padding-left: 11px

    // @media (max-width: 500px)
    //     padding-right: 26px
    //     padding-left: 1px

    // @media (max-width: 400px)
    //     padding-right: 16px
    //     // padding-left: 16px

// Fold
.CodeMirror .CodeMirror-gutters
    background: none
    border-right: none

.CodeMirror .CodeMirror-foldgutter
    width: 35px

    @media (max-width: 800px)
        width: 25px

    // @media (max-width: 500px)
    //     width: 15px

.CodeMirror .CodeMirror-guttermarker-subtle
    text-align: right
    color: #dadada
    opacity: 0.25

.CodeMirror .CodeMirror-foldmarker
    display: none

// Cursor
.CodeMirror .CodeMirror-cursor
    border-left-color: #fff

// Selection
.CodeMirror .CodeMirror-selected
    background: #3f4147
.CodeMirror .CodeMirror-focused .CodeMirror-selected
    background: #3f4147
.CodeMirror .CodeMirror-line::selection,
.CodeMirror .CodeMirror-line > span::selection,
.CodeMirror .CodeMirror-line > span > span::selection
    background: #3f4147
.CodeMirror .CodeMirror-line::-moz-selection,
.CodeMirror .CodeMirror-line > span::-moz-selection,
.CodeMirror .CodeMirror-line > span > span::-moz-selection
    background: #3f4147

// Scrollbar
.CodeMirror .CodeMirror-simplescroll-horizontal,
.CodeMirror .CodeMirror-simplescroll-vertical
    background: none
    width: 18px

.CodeMirror .CodeMirror-simplescroll-horizontal div,
.CodeMirror .CodeMirror-simplescroll-vertical div
    background: #fff
    border: none
    width: 7px
    border-radius: 2px
    right: 2px
    opacity: 0.2
    transition: opacity 0.15s
    will-change: opacity

    &:hover
        opacity: 0.25

.CodeMirror .CodeMirror-scrollbar-filler
    background: none

// Elements
.CodeMirror .cm-title
    font-weight: bold
    color: #fff

.CodeMirror .cm-parenthesis
    color: #51dcff

.CodeMirror .cm-italic
    font-style: italic
    font-size: 12px

.CodeMirror .cm-bold
    font-weight: bold
    color: #fff

.CodeMirror .cm-underline
    text-decoration: underline

.CodeMirror .cm-lineThrough
    text-decoration: line-through

.CodeMirror .cm-brackets
    color: #ed9ffe

.CodeMirror .cm-checked
    color: #98e42e

.CodeMirror .cm-checked-value
    color: #98e42e
    text-decoration: line-through

.CodeMirror .cm-danger
    color: #ff6a49

.CodeMirror .cm-danger-value
    color: #ff6a49

.CodeMirror .cm-warning
    color: #ffc32f

.CodeMirror .cm-warning-value
    color: #ffc32f

// Logs
.logs
    position: absolute
    bottom: 0
    right: 0
    width: 200px
    font-family: Inconsolata
    font-size: 10px
    color: #fff
    opacity: 0
    transition: opacity 0.3s
    will-change: opacity
    z-index: 2

    @media (max-width: 812px)
        display: none

    // @media (max-width: 500px)
    //     width: 190px

    // @media (max-width: 400px)
    //     width: 180px

    .background
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%

    .messages
        position: absolute
        bottom: 0
        right: 0
        width: 100%
        padding: 20px
        background: rgba(39, 40, 45, 0.75)

        // @media (max-width: 500px)
        //     padding: 15px

        // @media (max-width: 400px)
        //     padding: 10px

        .message
            margin-bottom: 0.75em
            opacity: 0.4

            &.urgent
                opacity: 0.8
                color: #ff6a49

    &:hover
        opacity: 1
