/* stylelint-disable no-descending-specificity */

/**
 * Navigation list
 * @define navigation-list
 */

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

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

.ecl-navigation-list {
  margin: 0;
}

.ecl-navigation-list--col-2,
.ecl-navigation-list--col-3 {
  display: grid;
  grid-auto-rows: auto;
  grid-column-gap: map.get($theme, 'grid', 'gutter');
  grid-row-gap: var(--s-2xl);
  width: 100%;
}

/* stylelint-disable-next-line order/order */
@include breakpoints.up('l') {
  .ecl-navigation-list--col-2 {
    grid-template-columns: repeat(2, 1fr);
    grid-row-gap: var(--s-3xl);
  }

  .ecl-navigation-list--col-3 {
    grid-template-columns: repeat(3, 1fr);
    grid-row-gap: var(--s-3xl);
  }
}

// Navigation list items

.ecl-navigation-list__item {
  background-color: map.get($theme, 'color', 'white');
  border: map.get($navigation-list, 'border');
  border-radius: map.get($navigation-list, 'border-radius');
  box-shadow: map.get($navigation-list, 'shadow');
  box-sizing: border-box;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.ecl-navigation-list__image {
  aspect-ratio: 4 / 1;
  display: block;
  object-fit: cover;
  width: 100%;
}

.ecl-navigation-list__content-block {
  padding: map.get($navigation-list, 'content_block_padding');
  position: relative;
}

// No border
.ecl-navigation-list__item--no-border {
  background-color: transparent;
  border-radius: 0;
  border-width: 0;
  box-shadow: none;

  .ecl-navigation-list__content-block {
    padding-inline-start: 0;
    padding-inline-end: 0;
  }
}

// Image as illustration variant
.ecl-navigation-list__item--image-as-illustration {
  .ecl-navigation-list__picture {
    position: absolute;
    top: var(--s-xs);
    right: var(--s-xs);
    height: 60px;
    width: 60px;

    .ecl-navigation-list__image {
      aspect-ratio: 1/1;
    }
  }

  .ecl-content-block__description,
  .ecl-content-block__title {
    margin-top: 0;
  }

  // Description margin when there is a title
  .ecl-content-block__title + .ecl-content-block__description {
    margin-top: var(--s-m);
  }

  .ecl-navigation-list__picture + .ecl-navigation-list__content-block {
    // 24px from the image
    .ecl-content-block__description,
    .ecl-content-block__title {
      margin-inline-end: 4rem;
    }

    // Description margin end when there is an image and a title
    .ecl-content-block__title + .ecl-content-block__description {
      margin-inline-end: var(--s-m);
    }
  }
}

// Illustration variant
.ecl-navigation-list__item--illustration {
  .ecl-navigation-list__picture {
    position: absolute;
    border-radius: 100px 0 100px 100px;
    top: var(--s-xs);
    right: var(--s-xs);
    background: var(--c-n-60, #e0e5f5);
    height: 60px;
    width: 60px;

    .ecl-navigation-list__image {
      aspect-ratio: auto;
      border: none;
      object-fit: contain;
      max-width: 100%;
      width: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .ecl-content-block__description,
  .ecl-content-block__title {
    margin-top: 0;
  }

  // Description margin when there is a title
  .ecl-content-block__title + .ecl-content-block__description {
    margin-top: var(--s-m);
  }

  .ecl-navigation-list__picture + .ecl-navigation-list__content-block {
    .ecl-content-block__description,
    .ecl-content-block__title {
      // 24px from the image
      margin-inline-end: 4rem;
    }

    // Description margin end when there is an image and a title
    .ecl-content-block__title + .ecl-content-block__description {
      margin-inline-end: var(--s-m);
    }
  }
}

@if map.has-key($navigation-list, 'yellow-bar') {
  .ecl-navigation-list__item:not(.ecl-navigation-list__item--no-border) {
    .ecl-navigation-list__content-block {
      &::before {
        background-color: var(--c-s);
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
        content: '';
        height: 4px;
        left: var(--s-l);
        position: absolute;
        top: 0;
        width: 32px;
      }
    }
  }
}
