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

@use 'sass:map';
@use '@ecl/vanilla-layout-grid/mixins/breakpoints';

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

.ecl-content-item {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.ecl-content-item--inline {
  flex-direction: row;
}

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

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

.ecl-content-item__date {
  flex-shrink: 0;
  margin-inline-end: var(--s-m);
}

.ecl-content-item__picture {
  flex-shrink: 0;
  margin-bottom: map.get($content-item, 'image-top-spacing');
  max-width: 100%;
}

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

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

@include breakpoints.up('m') {
  .ecl-content-item {
    &:not(.ecl-content-item--stack) {
      flex-direction: row;
    }
  }

  .ecl-content-item__picture {
    margin-bottom: 0;
    margin-inline-end: var(--s-m);
    max-width: 210px;
  }

  .ecl-content-item__picture--right {
    margin-inline-end: 0;
    margin-inline-start: var(--s-m);
    order: 1;
  }

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