@import 'systemDefaults'
@import 'breakpoints'

.codedialog-codeblock
    max-width: 30rem
    margin: 0.25rem 0.20rem

    &__panel
        display: inline-block
        background: rgba(255, 255, 255, 0.1)
        border-radius: 5px
        margin: 0.25rem
        min-width: 30rem

        & > :first-child
            margin-left: 2rem

    &__codetab
        display: inline-block
        padding: 0.5rem
        background: rgba(20, 37, 84, 1.0)
        transition: all 0.3s
        cursor: default

        &_active
            background: rgba(35, 52, 99, 1.0)

        &:hover
            background: rgba(50, 67, 114, 1.0)

        &:active
            background: rgba(20, 37, 84, 1.0)
    
    &__copy
        display: inline-block
        float: right
        height: 1.0rem
        font-size: 0.8rem
        padding: 0.59rem
        border-top-right-radius: 5px
        cursor: pointer
        transition: all 0.3s

        &:hover
            background: rgba(255, 255, 255, 0.3)

        &:active
            background: rgba(0, 0, 0, 0.3)
    
    &__codearea
        display: flex
        padding-top: 0.25rem
        padding-bottom: 0.5rem
        font-family: monospace
        font-size: 1.2em
        overflow: scroll
        -ms-overflow-style: none
        scrollbar-width: none
        height: 20rem
        background: rgba(35, 52, 99, 1.0)
        border-radius: 0 0 5px 5px

        &::-webkit-scrollbar
            display: none

    &__linenumbers
        line-height: 1.5rem
        padding: 0.25rem 0.75rem
        white-space: pre-wrap

    &__code
        line-height: 1.5rem
        padding: 0.25rem 0
        user-select: text
        white-space: pre-wrap

        & > *
            user-select: auto