// stylelint-disable selector-no-qualifying-type, selector-max-type, selector-max-compound-selectors, selector-max-combinators
.bullet-list {
  --#{$prefix}bullet-list-padding-block: #{$ouds-bullet-list-space-padding-block-body-large};
  --#{$prefix}bullet-list-icon-container-width: var(--#{$prefix}icon-medium-with-body-large);
  --#{$prefix}bullet-list-icon-size: var(--#{$prefix}icon-small-with-body-large);
  --#{$prefix}bullet-list-fixed-left-padding: calc(var(--#{$prefix}bullet-list-icon-container-width) + #{$ouds-bullet-list-space-column-gap-body-large});
  --#{$prefix}bullet-list-marker-left: #{$ouds-bullet-list-space-padding-inline-level-0};

  padding-left: 0;
  font-weight: $ouds-font-weight-web-body-strong;
  list-style-type: "";
  @include get-font-size("body-large");

  &.fs-bm,
  &.fs-bm ul,
  &.fs-bm ol {
    --#{$prefix}bullet-list-padding-block: #{$ouds-bullet-list-space-padding-block-body-medium};
    --#{$prefix}bullet-list-icon-container-width: var(--#{$prefix}icon-medium-with-body-medium);
    --#{$prefix}bullet-list-icon-size: var(--#{$prefix}icon-small-with-body-medium);
    --#{$prefix}bullet-list-fixed-left-padding: calc(var(--#{$prefix}bullet-list-icon-container-width) + #{$ouds-bullet-list-space-column-gap-body-medium});
    @include get-font-size("body-medium");
  }

  &.fw-normal,
  &.fw-normal ul,
  &.fw-normal ol {
    font-weight: $ouds-font-weight-web-body-default;
  }

  li {
    position: relative;
    padding: var(--#{$prefix}bullet-list-padding-block) 0;
    padding-left: calc(var(--#{$prefix}bullet-list-fixed-left-padding) + #{$ouds-bullet-list-space-padding-inline-level-0});

    &:has(ul, ol) {
      padding-bottom: 0; // remove duplicate padding when we have nested lists
    }

    &::before {
      position: absolute;
      top: var(--#{$prefix}bullet-list-padding-block);
      left: var(--#{$prefix}bullet-list-marker-left);
      width: var(--#{$prefix}bullet-list-icon-container-width);
      height: var(--#{$prefix}bullet-list-icon-container-width);
      height: 1lh;
      content: "";
    }

    ol,
    ul {
      padding-left: 0;
      margin-top: var(--#{$prefix}bullet-list-padding-block);
      list-style-type: "";
    }

    li {
      --#{$prefix}bullet-list-marker-left: calc(#{$ouds-bullet-list-space-padding-inline-level-1} - (var(--#{$prefix}bullet-list-fixed-left-padding) + #{$ouds-bullet-list-space-padding-inline-level-0}));
      padding-left: calc($ouds-bullet-list-space-padding-inline-level-1 - $ouds-bullet-list-space-padding-inline-level-0);

      li {
        --#{$prefix}bullet-list-marker-left: calc(#{$ouds-bullet-list-space-padding-inline-level-2} - (var(--#{$prefix}bullet-list-fixed-left-padding) + #{$ouds-bullet-list-space-padding-inline-level-1}));
        padding-left: calc($ouds-bullet-list-space-padding-inline-level-2 - $ouds-bullet-list-space-padding-inline-level-1);
      }
    }
  }
}

.bullet-list-default-color {
  --#{$prefix}bullet-color: var(--#{$prefix}color-content-default);
}

.bullet-list-brand-color {
  --#{$prefix}bullet-color: initial;
}

// we need to use child combinator instead of descendant to handle mixed lists
ul.bullet-list {
  @if $enable-bullet-list-tick {
    &.bullet-list-tick {
      --#{$prefix}bullet-list-custom-marker: #{$bullet-list-marker-tick};
    }
  }

  &.bullet-list-bare {
    --#{$prefix}bullet-list-custom-marker: #{$bullet-list-empty-marker};

    ul {
      --#{$prefix}bullet-list-custom-marker: initial;
    }
  }

  // this is necessary in order to avoid duplicating :before definition in all descendant li and still handle mixed lists
  &:not(:has(ol)) li,
  > li {
    &::before {
      background-color: var(--#{$prefix}bullet-color, var(--#{$prefix}color-content-brand-primary));
      mask-image: var(--#{$prefix}bullet-list-custom-marker, $bullet-list-marker-level-0);
      mask-repeat: no-repeat;
      mask-position: center right;
      mask-size: var(--#{$prefix}bullet-list-icon-size);
    }

    > ul {
      --#{$prefix}bullet-list-custom-marker: initial;

      > li {
        &::before {
          mask-image: var(--#{$prefix}bullet-list-custom-marker, $bullet-list-marker-level-1);
        }

        > ul > li {
          &::before {
            mask-image: var(--#{$prefix}bullet-list-custom-marker, $bullet-list-marker-level-2);
          }
        }
      }
    }
  }

}

ol.bullet-list {
  counter-reset: list;

  // this is necessary in order to avoid duplicating :before definition in all descendant li and still handle mixed lists
  &:not(:has(ul)) li,
  > li {
    counter-increment: list;

    &::before {
      text-align: right;
      content: counter(list) ".";
    }

    > ol {
      counter-reset: upper-alpha-list;
    }

    > ol > li {
      counter-increment: upper-alpha-list;

      &::before {
        content: counter(upper-alpha-list, upper-alpha) ".";
      }

      > ol {
        counter-reset: lower-alpha-list;
      }

      > ol > li {
        counter-increment: lower-alpha-list;

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