@use "sass:color";
@use "./../variables" as *;
@use "./../functions" as *;
@use "./../mixins/list" as *;

.list--unstyled {
  @include make-list-unstyled;
}

.list--inline {
  @include make-list-inline;
}

dl {
  $dl-margin-fallback: if(
    sass($enable-margins): var(--spacer) ; else: 0
  );

  margin-bottom: var(--dl-margin-bottom, #{$dl-margin-fallback});

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

.list--group {
  @include make-list-unstyled;

  & > li {
    border: 1px solid var(--border-color-main);
    border-bottom-color: transparent;
    padding: calc((var(--spacer) * 0.625) - 1px) var(--spacer);
    position: relative;

    &:first-child {
      border-top-left-radius: var(--border-radius-medium);
      border-top-right-radius: var(--border-radius-medium);
    }

    &:last-child {
      border-bottom: 1px solid var(--border-color-main);
      border-bottom-left-radius: var(--border-radius-medium);
      border-bottom-right-radius: var(--border-radius-medium);
    }
  }
}

.list--nested {
  @include make-list-unstyled;

  & > li {
    background-color: var(--white);
    border-radius: var(--border-radius-medium);
    border: 1px solid var(--border-color-main);

    $li-margin-fallback: if(
      sass($enable-margins): var(--spacer) ; else: 0
    );

    margin-bottom: var(--li-margin-bottom, #{$li-margin-fallback});

    & .list__item {
      padding: calc(calc(var(--spacer) * 0.625) - 1px) var(--spacer);
    }

    & .list--nested {
      margin-bottom: 0;

      & > li {
        border-radius: 0;
        border: 0 none;
        margin-bottom: 0;
        background-image: escape-svg($list-nested-indicator);
        background-size: var(--spacer) auto;
        background-repeat: no-repeat;
        background-position: left calc(var(--spacer) * 0.5) top var(--spacer);
        padding-left: calc(var(--spacer) * 1.5);
        border-top: 1px solid var(--border-color-main);
      }
    }
  }
}