@use "sass:map";
@use "sass:list";
@use "../tools/generate";
@use "../tools/text";
@use "../tools/convert";
@use "../tokens/space";
@use "../tokens/color";
@use "config";

@mixin text-readable {
  max-width: 35em;
}

@mixin text-narrow {
  max-width: 22em;
}

@mixin text-fullwidth {
  max-width: none;
}

@mixin text-relaxed {
  max-inline-size: clamp(40rem, 75vw, 70rem);
}

@mixin headings-base($heading-config, $selector-pattern, $base-styles) {
  $selector: ();

  @each $heading-level in map.keys($heading-config) {
    $selector: list.append(
      $selector,
      #{text.str-replace($selector-pattern, "$", $heading-level)},
      "comma"
    );
  }

  #{$selector} {
    @include generate.css-map($base-styles);
  }
}

@mixin headings($config, $selector-pattern) {
  @each $heading, $breakpoints in $config {
    #{text.str-replace($selector-pattern, "$", $heading)} {
      @include generate.responsive-css-map($breakpoints);
    }
  }
}

@mixin body-text($config) {
  p {
    margin-top: 0;
    margin-bottom: space.get("large");
    // Default štýly pre všetky p elementy
    @include generate.responsive-css-map(map.get($config, "default"));

    a:not(.no-underline):not(.underline-hover) {
      text-decoration: underline !important;
    }

    a.no-underline,
    a.underline-hover {
      text-decoration: none !important;
    }

    a.underline-hover:hover {
      text-decoration: underline !important;
    }
  }

  // Generovanie variantov pre p elementy s triedami
  @each $variant, $breakpoints in $config {
    @if $variant != default {
      p#{generate.variant-name($variant, ".")} {
        @include generate.responsive-css-map($breakpoints);
      }
    }
  }

  // Generovanie variantov pre a elementy s triedami
  @each $variant, $breakpoints in $config {
    @if $variant != default {
      a#{generate.variant-name($variant, ".")} {
        @include generate.responsive-css-map($breakpoints);
      }
    }
  }

  cite {
    font-style: normal;
  }

  hr {
    margin-top: space.get("large");
    margin-bottom: space.get("large");
    border: 0;
    border-top: 1px solid var(--color-border-strong);
  }
}

@mixin readability() {
  p {
    @include text-readable;
  }
}

@mixin list-unstyled() {
  list-style: none;
  list-style-type: none !important;
  max-width: none;
  margin: 0;
  padding: 0;

  > li {
    margin-bottom: 0;

    /* Fixes VoiceOver no announcing unordered lists */
    &::before {
      content: " ";
      position: absolute;
      width: 0;
      height: 0;
    }
  }
}

@mixin list-base() {
  margin: 0 0 space.get("large") 0;
  padding-left: space.get("large");
  @include text-readable;
  // Apply the same font styles as paragraphs
  @include generate.responsive-css-map(map.get(config.$body-text, "default"));
}

@mixin list-spacing($space, $config: config.$list-spacing) {
  > *:where(li):not(:last-child) {
    margin-bottom: map.get($config, $space);
  }

  > *:where(li) {
    > *:where(ul, ol) {
      margin-top: map.get($config, $space);
    }
  }
}

@mixin ul-list-base() {
  list-style-type: square;
  ul {
    list-style-type: disc;
    ul {
      list-style-type: circle;
    }
  }
}

@mixin list-circle() {
  list-style-type: disc !important;
  ul {
    list-style-type: circle;
    ul {
      list-style-type: square;
    }
  }
}

@mixin list-square() {
  list-style-type: square !important;
  ul {
    list-style-type: disc;
    ul {
      list-style-type: circle;
    }
  }
}

@mixin list-no-offset() {
  padding-left: space.get();
  list-style-position: outside;
}

@mixin list-inline() {
  @include list-unstyled();
  gap: space.get("small");
  display: flex;
  flex-wrap: wrap;

  > li {
    display: inline-flex;
  }
}

@mixin list-marker-orange() {
  > li {
    &::marker {
      color: var(--color-icon-accent);
    }
  }
}

@mixin description-list() {
  @include text-readable;
  @include generate.responsive-css-map(map.get(config.$body-text, "default"));
  padding-left: 0;

  dt {
    font-weight: 700;
  }
  dd {
    margin-left: 0;
    margin-bottom: space.get("large");

    &:last-child {
      margin-bottom: 0;
    }
  }
}