.highlight 
    counter-reset: line
    text-align: left

    &--linenos .highlight__line:before
        position: absolute
        counter-increment: line
        content: counter(line)
        height: 100%
        border-right: 1px solid var(--main-color)
        color: var(--main-color)
        width: 35px
        padding: 0 10px 0 0 
        text-align: right
        left: 0
        cursor: default

    &--linenos .highlight__line:hover:before
        color: var(--accent-color)

.highlight__line
        display: block
        position: relative
        padding-left: 50px
        white-space: pre-wrap
        overflow-wrap: anywhere
        cursor: text
        &:hover
            background: var(--codeline-hover-background)
            opacity: 1

.highlight__line:empty:after // Fixes empty lines
    content: " "

.highlight__language
        display: inline-block
        padding: 0 10px
        background: var(--main-background)
        user-select: none
        border-bottom: none
        color: var(--accent-color)

.highlight__code
    font-size: 1.7rem
    width: 100%
    border: 1px solid var(--accent-color)
    border-left: 5px solid var(--accent-color)
    padding: 5px
    

.highlight + br // This br is added to allow users to write outside of the generated highlight container on anki  
    display: none
