@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 *;

@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-in-percentage: $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;
    font-size: $font-size-code-in-percentage;
    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.

    $padding-x-max      : 8px;
    $padding-x-desired  : 0.4em;
    $padding-y-max      : 4px;
    $padding-y-desired  : calculate-min-vertical-empty-space($font-size-code-in-percentage);
    $padding-y-desired  : calc(calculate-min-vertical-empty-space($font-size-code-in-percentage) / 2);
    $padding-y: min($padding-y-desired, $padding-y-max);
    $padding-x: min($padding-x-desired, $padding-x-max);
    padding: #{$padding-y} #{$padding-x};
    display: inline-block; // Required for centering, otherwise contents align towards bottom with Y padding, causing overflows
  }


  @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;
  }
}

@function convert-percentage-to-decimal-ratio($current-relative-font-size) {
  @return calc($current-relative-font-size / 100%);
}


@function calculate-inline-parent-min-line-height(
  $inline-child-relative-font-size-in-decimal,
) {
  $parent-line-height: calc(
    1lh /* self height, height = 1 lh for inline element*/
    /
    #{$inline-child-relative-font-size-in-decimal} /* minimum possible font size of parent */
  );
  $parent-min-height: round(down, #{$parent-line-height}, 1px);
  @return $parent-min-height;
}

@function calculate-vertical-empty-space($parent-min-line-height) {
  $available-space: calc(
    #{$parent-min-line-height} /* Parent should be able to show single line of text text */
    -
    1lh, /* self height, height = 1 lh for inline element*/
  );
  @return max(#{$available-space}, 0px); // Return 0px if there's no available space
}

@function calculate-min-vertical-empty-space(
  $inline-element-relative-font-size-in-percentage,
) {
  $self-font-size-relative-in-decimal: convert-percentage-to-decimal-ratio($inline-element-relative-font-size-in-percentage);
  $parent-minimum-height: calculate-inline-parent-min-line-height($self-font-size-relative-in-decimal);
  $total-empty-space-y: calculate-vertical-empty-space($parent-minimum-height);
  @return $total-empty-space-y;
}
