//-----------------------------
// List
//-----------------------------

@use "../../config" as *;
@use "../../spacing" as *;
@use "../../theme" as *;
@use "../../type" as *;
@use "../../breakpoint" as *;
@use "../../utilities/convert" as *;
@use "../../utilities/rtl" as *;

/// List styles
/// @access public
/// @group list
@mixin list {
  .#{$prefix}--list {
    @include reset;
    @include font-family("sans");
    color: $text-body-default;
    .#{$prefix}--list-item--checkmark,
    .#{$prefix}--list-item--cross {
      list-style-type: none;
      position: relative;
      .#{$prefix}--list-item__icon {
        position: absolute;
        left: -1.4rem;
        @include rtl() {
          left: initial;
          right: -1.4rem;
        }
        top: 0.35em;
        color: $support-success-main;
      }
    }

    .#{$prefix}--list-item--cross {
      .#{$prefix}--list-item__icon {
        top: 0.35em;
        color: $support-error-main;
      }
    }
  }

  .#{$prefix}--list--colon {
    .#{$prefix}--list__element__title {
      &:after {
        content: ":";
      }
    }
  }

  .#{$prefix}--list--unstyled, 
  .#{$prefix}--list--simple  //renamed simple to unstyled, keeping simple styling to prevent legacy code from breaking
  {
    line-height: 1.5em;

    li {
      display: flex;
    }

    .#{$prefix}--list__element__title {
      font-weight: 700;
      margin-inline-end: calcRem(5px);
    }
  }

  .#{$prefix}--list--unordered,
  .#{$prefix}--list--bullets, //renamed bullets to unordered, keeping bullets styling to prevent legacy code from breaking
  .#{$prefix}--list--ordered {
    line-height: 1.6em;
    list-style-type: disc;
    margin-inline-start: 1.5em;
    .#{$prefix}--list__element__title {
      font-weight: 700;
      margin-inline-end: calcRem(5px);
    }
    li {
      margin-bottom: 0.4em;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .#{$prefix}--list--ordered {
    list-style-type: decimal;
  }

  .#{$prefix}--list--tooltip {
    li {
      padding: $spacing-02;
      border-bottom: 1px solid $border-subtle;
    }
  }

  .#{$prefix}--list--simple-inline {
    line-height: 1.5em;
    display: flex;
    flex-wrap: wrap;

    li {
      display: flex;
      margin-right: 1em;
    }

    .#{$prefix}--list__element__title {
      font-weight: 700;
      margin-inline-end: calcRem(5px);
    }
  }

  .#{$prefix}--list--small {
    font-size: 0.8em;
  }

  .#{$prefix}--list--details {
    line-height: 1.5rem;
    list-style-type: none;
    margin: 0;

    li {
      break-inside: avoid-column;
    }

    .#{$prefix}--list__element__title {
      font-weight: 600;
      display: block;
      @include type-style("heading-02"); //TODO previous font was 18,
      margin-bottom: $spacing-03;
    }

    .#{$prefix}--list__element__content {
      @include type-style("body-short-02");
      display: block;
    }
    .#{$prefix}--list__element {
      margin-bottom: $spacing-03;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}