1import { definePlugin } from '@expressive-code/core';
 2
 3export function pluginLanguageBadge() {
 4  return definePlugin({
 5    name: 'Language Badge',
 6    baseStyles: ({ cssVar }) => `
 7      [data-language]::before {
 8        position: absolute;
 9        z-index: 2;
10        right: calc(${cssVar('borderWidth')} + ${cssVar('uiPaddingInline')} / 2);
11        top: calc(${cssVar('borderWidth')} + 0.35rem);
12        padding: 0.1rem 0.5rem;
13        box-shadow: 0 0 1px 1px ${cssVar('codeBackground')};
14        content: attr(data-language);
15        font-size: 0.75rem;
16        text-transform: uppercase;
17        color: ${cssVar('uiSelectionForeground')};
18        background: ${cssVar('uiSelectionBackground')};
19        border-radius: ${cssVar('borderRadius')};
20        pointer-events: none;
21        transition: opacity 0.2s;
22      }
23      /* Prevent the language badge from overlapping the copy button */
24      .frame:not(.has-title):not(.is-terminal) {
25        /* If the copy button is always visible, move badget to the side */
26        @media not (hover: hover) {
27          [data-language]::before {
28            color: $color-mix(in oklab,${cssVar('uiSelectionForeground')}75%,transparent);
29            background: color-mix(in oklab,${cssVar('uiSelectionBackground')}15%,transparent);
30            translate: -3rem 0;
31          }
32        }
33        /* If it's only visible on hover, hide the language badge on hover */
34        @media (hover: hover) {
35          &:hover [data-language]::before {
36            opacity: 0;
37          }
38        }
39      }
40    `,
41  });
42}