hacked-shiki.css

@layer root, hacked;

@property --horizontal-spacing {
  syntax: '<length>';
  initial-value: 0;
}

@layer root {
  :root {
    --highlight-bg-color: rgba(101, 117, 133, .16);
    --highlight-error-color: rgb(70, 0, 0);
    --highlight-warning-color: rgb(70, 70, 0);
    --diff-removed-bg-color: rgba(244, 63, 94, .16);
    --diff-removed-color: rgb(70, 0, 0);
    --diff-added-bg-color: rgba(73, 139, 84, 0.16);
    --diff-added-color: rgb(70, 70, 0);
  }
}

@layer hacked {
  [class*=language-] {
    --horizontal-spacing: 24px;

    &:hover.has-focused .line:not(.focused) { /* :hover.has-focused-lines .line:not(.has-focus) { */
      filter: blur(0);
      opacity: 1;
    }

    &.has-focused .line:not(.focused) { /* &.has-focused-lines .line:not(.has-focus) { */
      filter: blur(.095rem);
      transition: filter .35s, opacity .35s;
    }

    & code {
      width: calc(100% - 8px);

      & .highlight,
      & .highlighted {
        background-color: var(--highlight-bg-color) !important;
        margin-inline: calc(-1 * var(--horizontal-spacing));
        padding-inline: var(--horizontal-spacing);

        &.error {
          background-color: var(--highlight-error-color) !important;
        }

        &.warning {
          background-color: var(--highlight-warning-color) !important;
        }
      }

      & .diff {
        margin-inline: calc(-1 * var(--horizontal-spacing));
        padding-inline: var(--horizontal-spacing);

        &::before {
          position: absolute;
          left: 10px;
        }

        &.remove {
          background-color: var(--diff-removed-bg-color) !important;
          opacity: .7;

          &::before {
            content: '-';
            color: var(--diff-removed-color);
          }
        }

        &.add {
          background-color: var(--diff-added-bg-color) !important;

          &::before {
            content: '+';
            color: var(--diff-added-color);
          }
        }
      }
    }
  }
}