privacy.sexy/src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/markdown-styles.scss

@use "@/presentation/assets/styles/main" 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 code() {
  code {
    @content;
  }
}

@mixin no-margin($selectors) {
  #{$selectors} {
    margin: 0;
  }
}

@mixin no-padding($selectors) {
  #{$selectors} {
    padding: 0;
  }
}

@mixin left-padding($selectors, $horizontal-spacing) {
  #{$selectors} {
    padding-inline-start: $horizontal-spacing;
  }
}

@mixin bottom-margin($selectors, $vertical-spacing) {
  #{$selectors} {
    &:not(:last-child) {
      margin-bottom: $vertical-spacing;
    }
  }
}

@mixin apply-uniform-vertical-spacing($base-vertical-spacing) {
  /* Reset default top/bottom margins added by browser. */
  @include no-margin('p');
  @include no-margin('h1, h2, h3, h4, h5, h6');
  @include no-margin('blockquote');
  @include no-margin('pre');

  /* Add spacing between elements using `margin-bottom` only (bottom-up instead of top-down strategy). */
  $small-vertical-spacing: math.div($base-vertical-spacing, 2);
  @include bottom-margin('p', $base-vertical-spacing);
  @include bottom-margin('h1, h2, h3, h4, h5, h6', $base-vertical-spacing);
  @include bottom-margin('ul, ol', $base-vertical-spacing);
  @include bottom-margin('li', $small-vertical-spacing);
  @include bottom-margin('table', $base-vertical-spacing);
  @include bottom-margin('blockquote', $base-vertical-spacing);
  @include bottom-margin('pre', $base-vertical-spacing);
}

@mixin apply-uniform-horizontal-spacing($base-horizontal-spacing) {
  /* Reset default left/right paddings added by browser. */
  @include no-padding('ul, ol');

  /* Add spacing for list items. */
  $large-horizontal-spacing: $base-horizontal-spacing * 2;
  @include left-padding('ul, ol', $large-horizontal-spacing);
}

@mixin markdown-text-styles($text-size) {
  $base-spacing: $text-size;

  a {
    &[href] {
      word-break: break-word; // Enables long URLs to wrap within the container, preventing horizontal overflow.
    }
    &[href^="http"]{
      &:after {
        /*
          Use mask element instead of content/background-image etc.
          This way we can apply current font color to it to match the theme
        */
        mask: url(@/presentation/assets/icons/external-link.svg) no-repeat 50% 50%;
        mask-size: cover;
        content: '';
  
        display: inline-block;
        width: $text-size;
        height: $text-size;
  
        background-color: $text-color;
        margin-left: math.div($text-size, 4);
      }
      /*
        Match color of global hover behavior. We need to do it manually because global hover sets
        `color` property but here we need to modify `background-color` property because color only
        works if SVG is embedded as HTML element (as `<svg/>`) not as `url(..)` as we do. Then the
        only option is to use `mask` and `background-color` properties.
      */
      @include hover-or-touch {
        &::after{
          background-color: $color-highlight;
        }
      }
    }
  }

  @include code {
    font-family: $font-normal;
    font-weight: 600;
  }
  
  @include inline-code {
    word-break: break-all; // Enables inline code to wrap with the text, even for long single words (like registry paths), thus preventing overflow.
  }
  
  @include code-block {
    padding: $base-spacing;
    background: $color-primary-darker;
    overflow: auto; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
  }

  @include apply-uniform-vertical-spacing($base-spacing);
  @include apply-uniform-horizontal-spacing($base-spacing);

  ul {
    /*
        Set list style explicitly, because otherwise it changes based on parent <ul>s in tree view.
        We reset the style from here.
    */
    list-style: square;
  }

  blockquote {
    padding: 0 $base-spacing;
    border-left: .25em solid $color-primary;
  }
}