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

@use 'sass:map';

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

.ecl-content-item {
  align-items: flex-start;
  box-sizing: border-box;
  display: flex;
  height: 100%;
  flex-direction: row;
  margin: 0;
}

.ecl-content-item--stack {
  flex-direction: column;
}

.ecl-content-item--divider {
  border-bottom: 1px solid map.get($content-item, 'divider-color');
  padding-bottom: map.get($theme, 'spacing-print', 'l');
}

.ecl-content-item__content-block {
  margin-inline-end: auto;
  max-width: var(--max-w);
}

.ecl-content-item__date {
  flex-shrink: 0;
  margin-inline-end: map.get($theme, 'spacing-print', 'm');
}

.ecl-content-item__picture {
  flex-shrink: 0;
  margin-inline-end: map.get($theme, 'spacing-print', 'm');
  max-width: 210px;
}

.ecl-content-item__picture--small {
  height: 140px;
  width: 140px;
}

.ecl-content-item__image {
  border: 1px solid map.get($content-item, 'image-border-color');
  width: calc(100% - 2px);
}

.ecl-content-item__picture--right {
  margin-inline-end: 0;
  margin-inline-start: map.get($theme, 'spacing-print', 'm');
  order: 1;
}

.ecl-content-item__picture--top {
  margin: 0 0 map.get($theme, 'spacing-print', 'm');
  max-width: 100%;
}
