/**
 * Featured item
 * @define featured-item
 */

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

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

.ecl-featured-item__container {
  border-radius: map.get($featured-item, 'border-radius');
  display: flex;
  flex-direction: column;
}

.ecl-featured-item__item {
  box-sizing: border-box;
  flex-basis: 50%;
  flex-grow: 1;

  &:first-child {
    order: 2;
    padding-bottom: map.get($featured-item, 'padding');
  }

  &:last-child {
    order: 1;
  }
}

.ecl-featured-item__media_container {
  padding: map.get($featured-item, 'media-padding-mobile');
}

.ecl-featured-item__title {
  margin: 0;
  padding: map.get($featured-item, 'title-spacing-mobile');
}

.ecl-featured-item__title-content {
  color: map.get($featured-item, 'title-color');
  display: inline-block;
  font: map.get($featured-item, 'title-font');
  font-weight: map.get($featured-item, 'title-font-weight');
  max-width: var(--max-w);
}

.ecl-featured-item__description {
  color: map.get($featured-item, 'description-color');
  font: map.get($featured-item, 'description-font');
  margin-inline: map.get(
    $featured-item,
    'description-spacing-horizontal-mobile'
  );
  max-width: var(--max-w);

  .ecl-featured-item__title + & {
    margin-block: map.get(
      $featured-item,
      'description-spacing-vertical-mobile'
    );
  }

  > *:first-child {
    margin-top: 0;
  }

  > *:last-child {
    margin-bottom: 0;
  }
}

.ecl-featured-item__link {
  display: inline-block;
  margin-inline: map.get($featured-item, 'link-spacing-horiontal-mobile');

  .ecl-featured-item__title + &,
  .ecl-featured-item__description + & {
    margin-block: map.get($featured-item, 'link-spacing-vertical-mobile');
  }
}

/* stylelint-disable-next-line order/order */
@include breakpoints.up('s') {
  .ecl-featured-item__container {
    flex-direction: row-reverse;
  }

  .ecl-featured-item__item {
    &:first-child {
      order: initial;
    }

    &:last-child {
      order: initial;
    }
  }

  .ecl-featured-item__title {
    margin-block: map.get($featured-item, 'title-spacing-vertical-desktop');
    margin-inline: map.get($featured-item, 'title-spacing-horizontal-desktop');
  }

  .ecl-featured-item__media_container {
    padding: map.get($featured-item, 'media-padding-desktop');
  }

  .ecl-featured-item__link {
    margin-inline: map.get($featured-item, 'link-spacing-horizontal-desktop');

    .ecl-featured-item__description + &,
    .ecl-featured-item__title + & {
      margin-block: map.get($featured-item, 'link-spacing-vertical-desktop');
    }
  }

  .ecl-featured-item__description {
    .ecl-featured-item__title + & {
      margin-block: map.get(
        $featured-item,
        'description-spacing-vertical-desktop'
      );
    }

    margin-inline: map.get(
      $featured-item,
      'description-spacing-horizontal-desktop'
    );
  }

  .ecl-featured-item__container--right {
    flex-direction: row;

    .ecl-featured-item__title {
      margin: 0;
    }

    .ecl-featured-item__description {
      margin-inline-start: 0;
    }

    .ecl-featured-item__link {
      margin: map.get($featured-item, 'link-spacing-right');
    }

    .ecl-featured-item__media_container {
      margin-inline: map.get(
        $featured-item,
        'media-spacing-horizontal-right-desktop'
      );
      padding: map.get($featured-item, 'media-padding-right');
    }
  }

  .ecl-featured-item:not(
    .ecl-featured-item--highlight,
    .ecl-featured-item--simple
  ) {
    .ecl-featured-item__item:only-child {
      .ecl-featured-item__description,
      .ecl-featured-item__link,
      .ecl-featured-item__title {
        margin-inline-start: 0;
      }
    }
  }
}

/**
* Simple
*/
.ecl-featured-item--simple {
  box-shadow: map.get($featured-item, 'shadow');

  .ecl-featured-item__container {
    background-color: map.get($featured-item, 'simple', 'container-background');
    border: map.get($featured-item, 'border');
    border-inline-start: map.get($featured-item, 'simple', 'border-size') solid
      map.get($featured-item, 'simple', 'border-color');
    padding: map.get($featured-item, 'simple', 'padding-mobile');
  }

  .ecl-featured-item__media_container {
    padding: map.get($featured-item, 'simple', 'media-padding-mobile');
  }

  .ecl-featured-item__title {
    margin: 0;
    padding: map.get($featured-item, 'simple', 'title-spacing');
  }

  .ecl-featured-item__description {
    margin-inline: map.get(
      $featured-item,
      'simple',
      'description-spacing-horizontal'
    );
    margin-block: map.get(
      $featured-item,
      'simple',
      'description-spacing-vertical-no-title'
    );
  }

  .ecl-featured-item__title + .ecl-featured-item__description {
    margin-block: map.get(
      $featured-item,
      'simple',
      'description-spacing-vertical'
    );
  }

  .ecl-featured-item__link {
    margin-inline: map.get($featured-item, 'simple', 'link-spacing-horizontal');
    margin-block: map.get(
      $featured-item,
      'simple',
      'description-spacing-vertical-no-title'
    );
  }

  .ecl-featured-item__title + .ecl-featured-item__link,
  .ecl-featured-item__description + .ecl-featured-item__link {
    margin-block: map.get($featured-item, 'simple', 'link-spacing-vertical');
  }
}

/* stylelint-disable-next-line order/order */
@include breakpoints.up('s') {
  .ecl-featured-item--simple {
    .ecl-featured-item__container {
      padding: map.get($featured-item, 'simple', 'padding-desktop');
    }

    .ecl-featured-item__title,
    .ecl-featured-item__description,
    .ecl-featured-item__link {
      margin-inline: map.get($featured-item, 'simple', 'text-spacing-desktop');
      padding-inline: 0;
    }

    .ecl-featured-item__description {
      margin-block: map.get(
        $featured-item,
        'simple',
        'description-spacing-vertical-no-title'
      );
    }

    .ecl-featured-item__title + .ecl-featured-item__description {
      margin-block: map.get(
        $featured-item,
        'simple',
        'description-spacing-vertical-desktop'
      );
    }

    .ecl-featured-item__media_container {
      padding: map.get($featured-item, 'simple', 'media-padding-desktop');
    }

    .ecl-featured-item__container--right {
      .ecl-featured-item__title,
      .ecl-featured-item__description,
      .ecl-featured-item__link {
        margin-inline: map.get(
          $featured-item,
          'simple',
          'text-spacing-right-desktop'
        );
      }

      .ecl-featured-item__media_container {
        margin: 0;
        padding: map.get($featured-item, 'simple', 'media-padding-right');
      }
    }

    .ecl-featured-item__item:only-child {
      .ecl-featured-item__title,
      .ecl-featured-item__description,
      .ecl-featured-item__link {
        margin-inline: map.get(
          $featured-item,
          'simple',
          'text-spacing-only-child'
        );
      }
    }
  }
}

/**
* Highlight
*/
.ecl-featured-item--highlight {
  box-shadow: map.get($featured-item, 'shadow');

  .ecl-featured-item__container {
    background-color: map.get(
      $featured-item,
      'highlight',
      'container-background'
    );
    border: map.get($featured-item, 'border');
    border-inline-start: map.get($featured-item, 'highlight', 'border-size')
      solid map.get($featured-item, 'highlight', 'border-color');
    padding: map.get($featured-item, 'highlight', 'padding-mobile');
  }

  .ecl-featured-item__media_container {
    padding: map.get($featured-item, 'highlight', 'media-padding-mobile');
  }

  .ecl-featured-item__item:first-child {
    background-color: map.get($featured-item, 'highlight', 'item-background');
  }

  .ecl-featured-item__title {
    background-color: map.get($featured-item, 'highlight', 'title-background');
    padding: map.get($featured-item, 'highlight', 'title-spacing');
  }

  /* stylelint-disable-next-line no-descending-specificity */
  .ecl-featured-item__description {
    margin-inline: map.get(
      $featured-item,
      'highlight',
      'description-spacing-horizontal'
    );
    margin-block: map.get(
      $featured-item,
      'highlight',
      'description-spacing-vertical-no-title'
    );
  }

  .ecl-featured-item__title + .ecl-featured-item__description {
    margin-block: map.get(
      $featured-item,
      'highlight',
      'description-spacing-vertical'
    );
  }

  /* stylelint-disable-next-line no-descending-specificity */
  .ecl-featured-item__link {
    margin-inline: map.get(
      $featured-item,
      'highlight',
      'link-spacing-horizontal'
    );
    margin-block: map.get(
      $featured-item,
      'highlight',
      'description-spacing-vertical-no-title'
    );
  }

  .ecl-featured-item__title + .ecl-featured-item__link,
  .ecl-featured-item__description + .ecl-featured-item__link {
    margin-block: map.get($featured-item, 'highlight', 'link-spacing-vertical');
  }
}

/* stylelint-disable order/order */
@include breakpoints.up('s') {
  .ecl-featured-item--highlight {
    .ecl-featured-item__container {
      padding-block: map.get(
        $featured-item,
        'highlight',
        'padding-vertical-desktop'
      );
      padding-inline: map.get(
        $featured-item,
        'highlight',
        'padding-horizontal-desktop'
      );
    }

    .ecl-featured-item__title {
      margin-inline: map.get(
        $featured-item,
        'highlight',
        'title-spacing-desktop'
      );
    }

    .ecl-featured-item__description,
    .ecl-featured-item__link {
      margin-inline-start: map.get(
        $featured-item,
        'highlight',
        'text-spacing-desktop'
      );
    }

    .ecl-featured-item__description {
      margin-block: map.get(
        $featured-item,
        'highlight',
        'description-spacing-vertical-no-title'
      );
    }

    .ecl-featured-item__media_container {
      margin-block: map.get(
        $featured-item,
        'highlight',
        'media-spacing-vertical-desktop'
      );
      margin-inline: map.get(
        $featured-item,
        'highlight',
        'media-spacing-horizontal-desktop'
      );
      padding: map.get($featured-item, 'highlight', 'media-padding-desktop');
    }

    .ecl-featured-item__container--right {
      .ecl-featured-item__media_container {
        padding-block: map.get(
          $featured-item,
          'highlight',
          'media-padding-vertical-right'
        );
        margin-inline: map.get(
          $featured-item,
          'highlight',
          'media-padding-horizontal-right'
        );
      }

      .ecl-featured-item__title {
        margin-inline: map.get(
          $featured-item,
          'highlight',
          'title-spacing-right-desktop'
        );
      }

      .ecl-featured-item__description,
      .ecl-featured-item__link {
        margin-inline: map.get(
          $featured-item,
          'highlight',
          'text-spacing-right-desktop'
        );
      }
    }
  }
}

// Footer
.ecl-featured-item__footer {
  justify-content: space-between;
  background-color: var(--c-p);
  border-radius: 0 0 2px 2px;
  display: flex;
  padding: var(--s-xl);
}

.ecl-featured-item__footer-content {
  max-width: var(--max-w);
}

.ecl-featured-item__footer-description {
  color: map.get($theme, 'color', 'white');
  font: var(--f-m);
}

.ecl-featured-item__footer-link {
  margin-top: var(--s-m);
}

.ecl-featured-item__footer-picture {
  display: flex;

  img {
    align-self: stretch;
    margin-inline-start: var(--s-xl);
    max-width: 72px;
    max-height: 72px;
  }
}

@include breakpoints.up('m') {
  .ecl-featured-item__footer-picture img {
    max-height: 120px;
    max-width: 210px;
  }
}
