// Mixins: List

@use '../config.settings' as *;
@use '../functions' as *;
@use 'clearfix' as *;
@use 'breakpoint' as *;

@mixin list-clean {
  list-style-type: none;
  margin: 0;
  padding: 0;

  li {
    padding-inline-start: 0;

    &::before {
      display: none;
    }
  }
}

@mixin list-inline {
  list-style-type: none;
  margin-inline-start: 0;
  padding-inline-start: 0;

  li {
    padding-inline-start: 0;
  }

  > li {
    display: inline;
  }
}

@mixin list-pipeline($pipeline-border-color: gesso-color(ui, generic, border)) {
  @include clearfix();
  list-style-type: none;
  margin-inline-start: 0;
  padding-inline-start: 0;

  > li {
    border-inline-end: 1px solid $pipeline-border-color;
    display: block;
    float: inline-start;
    margin-inline-end: 0.75em;
    padding-inline: 0 0.75em;

    @supports not (float: inline-start) {
      float: left;

      @if $support-for-rtl {
        [dir='rtl'] & {
          float: right;
        }
      }
    }

    &.is-active {
      font-weight: gesso-font-weight(bold);
    }

    &:last-child {
      border-inline-end: 0;
      margin-inline-end: 0;
      padding-inline-end: 0;
    }
  }
}

@mixin list-border(
  $list-border-padding: 0.25rem,
  $list-border-color: gesso-color(ui, generic, border)
) {
  list-style: none;
  margin-inline-start: 0;
  padding-inline-start: 0;

  li {
    padding-inline-start: 0;
  }

  > li {
    border-block-end: 1px solid $list-border-color;
    padding: $list-border-padding;
  }
}

@mixin list-column(
  $list-column-count: 2,
  $list-column-gap: 2em,
  $list-item-padding: 0.25em
) {
  list-style: none;
  margin-inline-start: 0;
  padding-inline-start: 0;

  li {
    padding-inline-start: 0;
  }

  > li {
    break-inside: avoid-column;
    display: table; // break-inside alternative for Firefox
    margin-block-end: 0;
    padding-block-end: $list-item-padding; // use padding instead of margin for Safari bug with CSS columns
  }

  @include breakpoint(500px) {
    column-count: $list-column-count;
    column-gap: $list-column-gap;
  }
}
