/* ==========================================================================
   STYLES / #LISTS
   ========================================================================== */

// The % (silent class) allows code to be extended (@extend) to other elements
// without bloating the code.
//
// @example scss
//  .foo {
//   @extend %dfe-section-break--xl;
//  }

/**
 * 1. 'Random number' used to align ul and ol left with content.
 * 2. 'Random number' used to give sufficient spacing between text and icon.
 * 3. 'Random number' used to align icon and text.
 */

%dfe-list {
  @include dfe-typography-responsive(19);
  @include dfe-responsive-margin(4, 'bottom');

  list-style-type: none;
  margin-top: 0;
  padding-left: 0;
}

%dfe-list > li {
  @include dfe-responsive-margin(2, 'bottom');

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

%dfe-list--bullet {
  list-style-type: disc;
  padding-left: 20px; /* [1] */
}

.dfe-list--bullet {
  @extend %dfe-list--bullet;
}

%dfe-list--number {
  list-style-type: decimal;
  padding-left: 20px; /* [1] */
}

.dfe-list--number {
  @extend %dfe-list--number;
}

.dfe-list {
  @extend %dfe-list;
}

ul {
  @extend %dfe-list;
  @extend %dfe-list--bullet;
}

ol {
  @extend %dfe-list;
  @extend %dfe-list--number;
}

.dfe-list--tick,
.dfe-list--cross {
  list-style: none;
  margin-top: 0;
  padding-left: 40px; /* [2] */
  position: relative;

  svg {
    left: -4px; /* [3] */
    margin-top: -5px; /* [3] */
    position: absolute;
  }
}