/**
 * Content block print
 * @define content-block
 */

@use 'sass:map';

// Exposed variables
$theme: null !default;
$content-block: null !default;

.ecl-content-block {
  margin: 0;
}

.ecl-content-block__label-container {
  display: inline-flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 -#{map.get($theme, 'spacing-print', 'xs')};
  padding: 0;
  width: 100%;
}

.ecl-content-block__label-item {
  margin-bottom: map.get($theme, 'spacing-print', 'xs');
  margin-inline-end: map.get($theme, 'spacing-print', 'xs');

  &:last-child {
    margin-inline-end: 0;
  }
}

.ecl-content-block__primary-meta-container {
  color: map.get($content-block, 'primary_meta-color');
  display: inline-flex;
  flex-wrap: wrap;
  font: map.get($theme, 'font-print', 's');
  list-style: none;
  margin: map.get($theme, 'spacing-print', 'xs')
    0 -#{map.get($theme, 'spacing-print', 'xs')};
  padding: 0;
  width: 100%;
}

.ecl-content-block__primary-meta-item {
  border-inline-end: 1px solid var(--c-p);
  margin-bottom: map.get($theme, 'spacing-print', 'xs');
  margin-inline-end: map.get($theme, 'spacing-print', 'm');
  padding-inline-end: map.get($theme, 'spacing-print', 'm');

  &:last-child {
    border-inline-end-width: 0;
    margin-inline-end: 0;
    padding-inline-end: 0;
  }
}

.ecl-content-block__title {
  color: map.get($content-block, 'text-color');
  font: map.get($content-block, 'title-font');
  font-weight: map.get($theme, 'font-weight', 'bold');
  margin: map.get($theme, 'spacing-print', 'xs') 0 0;
  max-width: var(--max-w);
}

.ecl-content-block__description {
  color: map.get($content-block, 'text-color');
  font: map.get($theme, 'font-prolonged-width', 'm');
  margin-top: map.get($theme, 'spacing-print', 'xs');
  max-width: var(--max-w);
}

.ecl-content-block__secondary-meta-container {
  color: map.get($content-block, 'secondary-meta-color');
  display: flex;
  flex-direction: column;
  font: map.get($content-block, 'secondary-meta-font');
  list-style: none;
  margin: map.get($theme, 'spacing-print', 'm') 0 0;
  padding: 0;
}

.ecl-content-block__secondary-meta-item {
  align-items: center;
  display: inline-flex;
  margin-bottom: map.get($theme, 'spacing-print', 'xs');
  width: 100%;

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

.ecl-content-block__secondary-meta-icon {
  flex-shrink: 0;
  fill: map.get($content-block, 'secondary-meta-icon-color');
  margin-inline-end: map.get($theme, 'spacing-print', 'xs');
}

.ecl-content-block__tag-container {
  display: inline-flex;
  flex-wrap: wrap;
  list-style: none;
  margin: map.get($theme, 'spacing-print', 'l')
    0 -#{map.get($theme, 'spacing-print', 'xs')};
  padding: 0;
  width: 100%;
}

.ecl-content-block__tag-item {
  margin-bottom: map.get($theme, 'spacing-print', 'xs');
  margin-inline-end: map.get($theme, 'spacing-print', 'xs');
}

.ecl-content-block__link-container {
  margin-top: map.get($theme, 'spacing-print', 'l');
}

.ecl-content-block__link-list {
  border-top: 1px solid map.get($content-block, 'link-separator-color');
  list-style: none;
  margin: map.get($theme, 'spacing-print', 'l') 0 0;
  padding: map.get($theme, 'spacing-print', 'l') 0 0;

  &:first-child {
    border-top-width: 0;
    margin-top: 0;
    padding-top: 0;
  }
}

.ecl-content-block__link-item {
  margin-top: map.get($theme, 'spacing-print', 'xs');

  &:first-child {
    margin-top: 0;
  }
}

.ecl-content-block__list-container {
  margin-top: map.get($theme, 'spacing-print', 'l');
}

.ecl-content-block__list {
  margin-top: map.get($theme, 'spacing-print', 'm');

  &:first-child {
    margin-top: 0;
  }
}

.ecl-content-block > *:first-child {
  margin-top: 0;
}
