:root {
  --phd-code-highlight-diff-inserted: rgba(0, 255, 128, 0.1);
  --phd-code-highlight-diff-deleted:  rgba(255, 0, 0, 0.1);
  --phd-code-highlight-prefix-opacity: 0.4;

  --phd-code-highlight-font-size:               var(--phd-font-size-2);
  --phd-code-highlight-font-size-mobile:        var(--phd-font-size-1);
  --phd-code-highlight-letter-spacing-mobile:   0.025em;
  --phd-code-highlight-radius:                  var(--phd-border-radius-m);

  --phd-code-highlight-scrollbar-bg:            hsla(0, 0%, 0%, 0.15);
  --phd-code-highlight-scrollbar-thumb:         hsla(0, 0%, 100%, 0.3);
  --phd-code-highlight-scrollbar-size:          0.5rem;
  --phd-code-highlight-scrollbar-thumb-radius:  calc(var(--phd-code-highlight-radius) * 2);

  --phd-code-highlight-filename-font-size:      var(--phd-font-size-2);
  --phd-code-highlight-filename-font-weight:    500;
  --phd-code-highlight-filename-letter-spacing: 0.01em;
  --phd-code-highlight-filename-gap:            var(--phd-space-2);
}

.phd-code-highlight__filename {
  font-size: var(--phd-code-highlight-filename-font-size);
  font-weight: var(--phd-code-highlight-filename-font-weight);
  letter-spacing: var(--phd-code-highlight-filename-letter-spacing);
  margin-bottom: var(--phd-code-highlight-filename-gap);
  overflow-wrap: anywhere;
  line-height: 1.3;
}

.phd-code-highlight__pre {
  overflow: auto;
}

.phd-code-highlight pre.phd-code-highlight__pre {
  font-size: var(--phd-code-highlight-font-size);
  border-radius: var(--phd-code-highlight-radius);
  scrollbar-width: thin;
  scrollbar-color: var(--phd-code-highlight-scrollbar-thumb) var(--phd-code-highlight-scrollbar-bg);
}

@media (max-width: 767px) {
  .phd-code-highlight pre.phd-code-highlight__pre {
    font-size: var(--phd-code-highlight-font-size-mobile);
    letter-spacing: var(--phd-code-highlight-letter-spacing-mobile);
  }
}

.phd-code-highlight__pre::-webkit-scrollbar {
  width: var(--phd-code-highlight-scrollbar-size);
  height: var(--phd-code-highlight-scrollbar-size);
}

.phd-code-highlight__pre::-webkit-scrollbar-track {
  background-color: var(--phd-code-highlight-scrollbar-bg);
}

.phd-code-highlight__pre::-webkit-scrollbar-thumb {
  background-color: var(--phd-code-highlight-scrollbar-thumb);
  border-radius: var(--phd-code-highlight-scrollbar-thumb-radius);
}

.phd-code-highlight:has(> .phd-code-highlight__filename) > .phd-code-highlight__pre {
  margin-top: 0;
}

.phd-code-highlight pre.diff-highlight > code .token.deleted:not(.prefix) {
  background-color: var(--phd-code-highlight-diff-deleted);
  color: inherit;
  display: block;
}

.phd-code-highlight pre.diff-highlight > code .token.inserted:not(.prefix) {
  background-color: var(--phd-code-highlight-diff-inserted);
  color: inherit;
  display: block;
}

.phd-code-highlight .token.prefix.unchanged {
  opacity: var(--phd-code-highlight-prefix-opacity);
}