@use "sass:map";
@use "sass:math";

@use "../../../00-base/01-helpers" as *;

////////////////////////////////////////////////////////////////////////////////
// *
// * Lists: helpers
// *
////////////////////////////////////////////////////////////////////////////////

// * Mixins
// =============================================================================

// ** list-reset
// -- Reset list item defaults when no margin, padding, list styles needed
@mixin list-reset {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

// ** Styling for lists in text
// -- http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/
// USAGE: @include list; (without parameter, defaults to unsorted style)
// --     @include list((type: "sorted")) gives you a sorted list
// --     @include list($some-variable) use a variable to add your settings (don't forget the extra brackets!)
//
// settings:
// -- type: "sorted" or "unsorted"
// -- spacing: space between the individual list items (uses margin-bottom for this)

// -- bullet: ("unsorted" list only) a keyword for the shape ("disk", "circle", "square")
// -- bullet-color: ("unsorted" list only) color of the bullet
// -- bullet-size: ("unsorted" list only) px width & height (if shape) OR px font size (if icon)
// -- bullet-weight: ("unsorted" list only) (only if icon) the font-awesome type: "light", "regular", "solid" or "brand"

// -- number-font: ("sorted" list only) the font used for the number
// -- number-space: ("sorted" list only) space available for the number to live in (space between left hand side and start of the text
// -- number-color: ("sorted" list only) color of the number
// -- number-delimiter: character that comes after the bullet in sorted lists ("." by default)
//
@mixin list($settings: null) {
  // Some defaults, used in case no $settings were given
  // or when either of the settings is omitted.
  $type-default: "unsorted";
  $bullet-default: "disk";
  $bullet-color-default: hsl(var(--clr-spot-1));
  $bullet-size-default: 6;
  $number-font-default: var(--ff-heading);
  $number-color-default: $bullet-color-default;
  $spacing-default: 6;
  $number-delimiter-default: ".";

  // Set up the actual variables that will be used.
  $type: null;
  $bullet: null;
  $bullet-color: null;
  $bullet-size: null;
  $number-font: null;
  $number-color: null;
  $spacing: null;
  $number-delimiter: null;

  // Map the variables to the settings if actual settings are passed.
  @if ($settings != null) {
    $type: map.get($settings, type);
    $bullet: map.get($settings, bullet);
    $bullet-color: map.get($settings, bullet-color);
    $bullet-size: map.get($settings, bullet-size);
    $number-font: map.get($settings, number-font);
    $number-color: map.get($settings, number-color);
    $spacing: map.get($settings, spacing);
    $number-delimiter: map.get($settings, number-delimiter);
  }

  // If any are not filled in, fall back to defaults.
  @if ($type == null) {
    $type: $type-default;
  }
  @if ($bullet == null) {
    $bullet: $bullet-default;
  }
  @if ($bullet-color == null) {
    $bullet-color: $bullet-color-default;
  }
  @if ($bullet-size == null) {
    $bullet-size: $bullet-size-default;
  }
  @if ($number-font == null) {
    $number-font: $number-font-default;
  }
  @if ($number-color == null) {
    $number-color: $number-color-default;
  }
  @if ($spacing == null) {
    $spacing: $spacing-default;
  }
  @if ($number-delimiter == null) {
    $number-delimiter: $number-delimiter-default;
  }

  // Shared styling.
  display: block;
  padding-left: 0;
  margin-left: 0;

  & > li {
    // Create a positioning context.
    position: relative;
    display: block;
    margin-bottom: rem($spacing);
    // Disable the normal item numbering.
    list-style: none;

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

  // ** List with numbers.
  @if $type == "sorted" {
    $listSettings: (
      type: $type,
      number-font: $number-font,
      number-color: $number-color,
      spacing: $spacing,
      number-delimiter: $number-delimiter
    );

    @include list-sorted($listSettings);

    // ** List with bullets.
  } @else {
    $listSettings: (
      type: $type,
      bullet: $bullet,
      bullet-color: $bullet-color,
      bullet-size: $bullet-size,
      spacing: $spacing,
      number-delimiter: $number-delimiter
    );

    @include list-unsorted($listSettings);
  }
}

@mixin list-sorted($settings: null) {
  // Map the variables to the settings if actual settings are passed.
  $number-font: map.get($settings, number-font);
  $number-color: map.get($settings, number-color);
  $spacing: map.get($settings, spacing);
  $number-delimiter: map.get($settings, number-delimiter);

  font-family: $number-font;

  & > li {
    // Space for the counter.
    padding-left: rem(26);

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      content: counter(list-item) ".";
      counter-increment: list-item;
      font-weight: var(--fw-bold);
      font-size: var(--fs-base);
      line-height: var(--lh-base);
      color: $number-color;

      // optional: for looong numbered lists, to make sure the number-delimiters are aligned,
      // you can align them to the right.
      //
      // leave some space so it doesn"t stick to the text.
      // width: rem($number-space - 12);
      // Align on the number-delimiter.
      // text-align: right;
    }

    // 2nd & 3rd levels: get their own counter.
    ol {
      counter-reset: listStyle2;

      > li {
        // Increment the new counter by 1.
        counter-increment: listStyle2;

        &::before {
          content: counter(listStyle2, lower-alpha) ".";
        }
      }
    }

    ol > li > ol {
      counter-reset: listStyle3;

      > li {
        // Increment the new counter by 1.
        counter-increment: listStyle3;

        &::before {
          content: counter(listStyle3, lower-roman) ".";
        }
      }
    }
  }
}

@mixin list-unsorted($settings: null) {
  $bullet: map.get($settings, bullet);
  $bullet-color: map.get($settings, bullet-color);
  $bullet-size: map.get($settings, bullet-size);
  $spacing: map.get($settings, spacing);

  & > li {
    // Space for the counter.
    padding-left: rem(13 + $bullet-size);

    &::before {
      content: "";
      position: absolute;
      // Push it in a bit because round shapes tend to look bigger and thus outside the edge.
      left: rem(1);
      top: calc((var(--fs-base) * var(--lh-base) / 2) - rem(math.div($bullet-size, 2)));
      width: rem($bullet-size);
      height: rem($bullet-size);

      @if ($bullet == "circle") {
        border: rem(1) solid $bullet-color;
        border-radius: 50%;
      } @else if ($bullet == "disk") {
        border-radius: 50%;
        background: $bullet-color;
      } @else {
        background: $bullet-color;
      }
    }

    ul {
      // Second level: circle bullet.
      li {
        &::before {
          border: rem(1) solid $bullet-color;
          border-radius: 50%;
          background: transparent;
        }

        // Third level: square filled bullet.
        li {
          &::before {
            border: 0 none;
            border-radius: 0;
            background: $bullet-color;
          }
        }
      }
    }
  }
}
