.dark .hl-keyword {
    color: #F78C6C;
}
.hl-keyword {
    @apply text-orange-600;
}

.dark .hl-property {
    color: #82AAFF;
}
.hl-property {
    color: #3c76f3;
}
.hl-attribute {
    font-style: italic;
}
/* dark theme */
.dark .hl-type {
    color: #FFCB6B;
}
/* light-theme */

.hl-type {
    /* color: #FFCB6B; */
    @apply text-amber-600
}

.hl-generic {
    color: #9d3af6;
}

.dark .hl-value {
    color: #C3E88D;
}
.hl-value {
    /* color: ; */
    @apply text-teal-700
}

.hl-literal {
    color: #ff9cac;
}

.hl-number {
    color: #F78C6C;
}

.dark .hl-variable {
    color: #B2CCD6;
}

.hl-variable {
    @apply text-slate-800
}

.hl-comment {
    color: #676E95;
}

.hl-blur {
    filter: blur(2px);
}

.hl-strong {
    font-weight: bold;
}

.hl-em {
    font-style: italic;
}

.hl-addition {
    min-width: 100%;
    @apply inline-block bg-green-600/50;
}

.hl-deletion {
    min-width: 100%;
    filter: blur(0.8px);
    @apply inline-block bg-red-600/50;
}
.hl-deletion:hover {
    filter: blur(0);
    @apply transition ease-in-out duration-300
}

.hl-gutter {
    display: inline-block;
    font-size: 0.9em;
    color: #555;
    padding: 0 1ch;
    user-select: none;
}

.hl-gutter-addition {
    @apply bg-green-600/50 text-slate-100;
    /* background-color: #0ae144; */
    /* color: #fff; */
}

.hl-gutter-deletion {
    @apply bg-red-600/50 text-slate-100;
}
