/* stylelint-disable scss/operator-no-newline-after */
@use "sass:color";
@use "@sass-palette/helper";
@use "@sass-palette/hope-config";
@use "@temp/theme-hope/highlighter";

div[class*="language-"] {
  margin: 0.75rem 0;
  transition:
    background-color var(--vp-t-color),
    color var(--vp-t-color);

  // narrow mobile
  @media (max-width: hope-config.$mobile) {
    #markdown-content > & {
      --code-border-radius: 0;

      margin: 0.75rem -1.5rem;
    }
  }

  pre code {
    @media print {
      padding: 0.5rem;
    }
  }

  // transitions for code notation highlighting
  .line {
    &.diff,
    &.highlighted {
      transition: background-color var(--vp-t-color);
    }
  }
}

@function whiteness($color) {
  @return color.channel($color, "whiteness", $space: hwb);
}

@mixin code-vars($code-color, $code-bg-color) {
  --code-c-text: #{$code-color};
  --code-c-bg: #{$code-bg-color};
  --code-c-highlight-bg: #{color.scale(
      $code-bg-color,
      $saturation: if(whiteness($code-bg-color) < 50%, 5%, 10%),
      $lightness: if(whiteness($code-bg-color) < 50%, 5%, -5%)
    )};
  --code-c-line-number: #{color.scale($code-color, $alpha: -33%)};
}

@if highlighter.$highlighter == "shiki" {
  @if helper.get-color(hope-config.$code-color) ==
    helper.get-dark-color(hope-config.$code-color) and
    helper.get-color(hope-config.$code-bg-color) ==
    helper.get-dark-color(hope-config.$code-bg-color)
  {
    :root {
      @include code-vars(
        $code-color: hope-config.$code-color,
        $code-bg-color: hope-config.$code-bg-color
      );
    }
  } @else {
    :root {
      @include code-vars(
        $code-color: helper.get-color(hope-config.$code-color),
        $code-bg-color: helper.get-color(hope-config.$code-bg-color)
      );
    }

    [data-theme="dark"] {
      @include code-vars(
        $code-color: helper.get-dark-color(hope-config.$code-color),
        $code-bg-color: helper.get-dark-color(hope-config.$code-bg-color)
      );
    }
  }
}