@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

    &.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, $accent, $yellow, $accent)
            animation: rotate-gradient 1s linear infinite

textarea
    width: 100%
    height: 300px
    font-size: 1.5rem
    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: wait
        animation: pulsing 1s ease-in-out infinite alternate
        // pointer-events: none

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