pre:has(.hljs) {
    display: flex;
    margin-bottom: 20px;

    .hljs {
        width: 100%;
        padding: 20px 30px;
    }
}

.hljs {
    background-color: var(--color-primary-dark);
    border-radius: 8px;
    color: var(--color-white);

    &.language-yaml {
        & > span {
            font-family: monospace;
        }

        .hljs-attr {
            color: var(--color-white);
        }

        .hljs-string {
            color: var(--color-secondary);
        }

        .hljs-number {
            color: var(--color-primary-light);
        }

        .hljs-literal {
            color: var(--color-primary);
        }

        .hljs-bullet {
            color: var(--color-white);
            font-weight: 900;
        }

        .hljs-attr {
            color: var(--color-white);
            font-weight: 900;
        }
    }

    &.language-bash {
        color: var(--color-white);
        font-family: monospace;

        &::first-letter {
            color: var(--color-primary-light);
            font-weight: 900;
        }
    }
}