/**
 * Ordered list print
 * @define ordered-list
 */

@use 'sass:map';

// Exposed variables
$theme: null !default;
$list: null !default;
$list-print: null !default;

.ecl-ordered-list,
%ecl-ordered-list {
  color: map.get($list, 'text-color');
  font: map.get($theme, 'font-print', 'm');
  list-style-position: outside;
  list-style-type: map.get($list, 'ordered', 'marker');
  margin: 0;
  padding-inline-start: map.get($list-print, 'ordered', 'padding-start');

  // Remove spacing in some situation
  .ecl-featured-item__item & {
    padding-inline-start: 0;
  }
}

.ecl-ordered-list__item,
%ecl-ordered-list__item {
  margin-top: map.get($theme, 'spacing-print', 's');
  max-width: var(--max-w);

  // inline-block elements (e.g. standalone link) shift the bullet to bottom; reset to top
  .ecl-link--standalone {
    vertical-align: text-top;
  }
}

.ecl-ordered-list__item--first {
  margin-top: 0;
}

.ecl-ordered-list--divider {
  > .ecl-ordered-list__item {
    border-bottom: 1px solid map.get($list, 'divider-color');
    padding-bottom: map.get($theme, 'spacing-print', 's');
  }

  .ecl-link {
    padding-top: 0;
  }
}

.ecl-ordered-list .ecl-ordered-list,
%ecl-ordered-list--nested {
  list-style-type: map.get($list, 'ordered', 'sublist-marker');
  margin-top: map.get($theme, 'spacing-print', 's');
  padding-inline-start: map.get($theme, 'spacing-print', 'l');
}

.ecl-ordered-list--no-marker,
.ecl-ordered-list--divider {
  list-style-type: none;
  padding-inline-start: 0;

  .ecl-ordered-list {
    list-style-type: none;
  }
}