LingoSynth/lingosynth/app/static/css/input.sass

@import '_vars'

@keyframes rotate-gradient
    from
        transform: rotate(0deg) scale(2)
    to
        transform: rotate(360deg) scale(2)


@keyframes pulsing
    0%
        background: $accent-dead
        
    100%
        background: $accent

@keyframes rotate
    0%
        transform: rotate(0deg)
        
    100%
        transform: rotate(360deg)

div.input-wrapper
    position: relative
    overflow: hidden

    background: $surface0

    padding: 2px 3px
    border-radius: 0.5rem

    *
        border-color: $surface0 !important

    .CodeMirror
        background: $surface1

    .CodeMirror-wrap:first-child
        background: green !important

    *::selection
        background: $accent
        color: $text

    .CodeMirror-cursors
        filter: invert(1)

    &.loading
        cursor: wait !important
        position: relative

        *
            pointer-events: none

        animation: pulsing 1s ease-in-out infinite alternate

        &::before
            content: ''
            display: block
            z-index: -1
            position: absolute
            top: 1rem
            left: 1rem
            right: 1rem
            bottom: 1rem

            background-image: conic-gradient(from 0deg, $teal, $yellow, $peach)
            animation: rotate-gradient 1s linear infinite

textarea
    width: 100%
    height: 400px
    font-size: 16px
    line-height: 1.5
    padding: 1rem
    border-radius: 0.5rem
    background: $surface0
    color: $text
    resize: none
    outline: none
    transition: border 0.1s ease-in-out

    min-height: 300px

    box-shadow: 0 0 40px 0 $crust

button
    margin-top: 1rem
    padding: 0.8rem 1.5rem
    border-radius: 0.5rem
    background: $accent-bg
    font-size: 18px
    cursor: pointer
    transition: background 0.1s ease-in-out

    color: $text

    &:hover
        background: $accent

    &.loading
        cursor: progress
        animation: pulsing 1s ease-in-out infinite alternate

    &.secondary
        background: $surface2

        &:hover
            background: $overlay0

    &.done
        background: $alt

        &:hover
            background: $alt-light

i.ti.ti-loader-2
    display: inline-block
    animation: rotate 1s linear infinite