List.css

.list {
  margin-bottom: 1rem;
  font-size: var(--font-size-medium);

  &.marginBottom0 {
    margin-bottom: 0;
  }
}

/**
 * Is empty message
 */
.isEmptyMessage {
  font-size: var(--font-size-medium);
  color: var(--color-text-p2);
}

/**
 * List style
 * Easily change list style by changing the listStyle-prop (defaults to: default)
 */

/**
 * Default
 */
.listStyleDefault {
  padding: 0;

  & li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--gutter-static-one-third) 0;
    border-radius: var(--radius);
    margin-bottom: var(--gutter-static-one-third);
  }
}

/**
 * Bullets
 */
ul.listStyleBullets,
ul.listStyleBullets ul {
  list-style-type: disc;
  padding-left: var(--gutter-static);

  & ul {
    margin-top: var(--gutter-static-one-third);
    list-style-type: circle;
    margin-bottom: var(--gutter-static-two-thirds);
  }

  & li {
    margin-bottom: var(--gutter-static-one-third);
  }
}

[dir="rtl"] ul.listStyleBullets,
[dir="rtl"] ul.listStyleBullets ul {
  padding-left: 0;
  padding-right: var(--gutter-static);
}

.listStyleDefault:nth-child(odd) {
  background-color: var(--color-fill);
}