@use "@/presentation/assets/styles/main" as *;
@use "_code-styling" as *;
@use 'sass:math';

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

  @include style-code-elements(
    $code-block-padding: $base-spacing,
    $color-background: $color-primary-darker,
  );
}