@use "@/presentation/assets/styles/colors" as *;
@use "@/presentation/assets/styles/mixins" as *;
@use "@/presentation/assets/styles/vite-path" as *;
@use "@/presentation/assets/styles/typography" as *;
@use 'sass:math';

@mixin code-block() {
  pre {
    @content; // :has(> code) { @content; } would be better, but Firefox doesn't support it https://caniuse.com/css-has
  }
}

@mixin inline-code() {
  :not(pre)>code {
    @content;
  }
}

@mixin base-code() {
  code {
    @content;
  }
}

@mixin style-code-elements(
  $color-background,
  $code-block-padding,
) {
  $font-size-code: $font-size-relative-smaller; // Keep relative size to scale right with different text sizes around.
  $border-radius: 2px; // Subtle rounding still maintaining sharp design.

  @include base-code {
    font-family: $font-family-monospace;
    border-radius: $border-radius;
    font-size: $font-size-code;
    color: $color-on-primary;
  }

  @include inline-code {
    background: $color-background;
    word-break: break-all; // Enables inline code to wrap with the text, even for long single words (like registry paths), thus preventing overflow.

    $font-size-code-in-decimal: math.div($font-size-code, 100%); // Converts percentage (e.g., 85%) to decimal (e.g., 0.85) for calculations.
    $font-size-code-in-em: calc(1em * #{$font-size-code-in-decimal});
    $vertical-padding: calc((1em - #{$font-size-code-in-em}) / 2);
    $horizontal-padding: calc(#{$font-size-code-in-em} * 0.4);
    padding: $vertical-padding $horizontal-padding;
  }

  @include code-block {
    background: $color-background;
    border-radius: $border-radius;
    overflow: auto; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
    padding: $code-block-padding;
  }
}