/**
 * Carousel
 * @define carousel ; weak
 */

// Import base
@import '@ecl/generic-base/generic-base';

@mixin ecl-carousel() {
  .ecl-carousel {
    align-items: stretch;
    background-color: #000;
    display: flex;
    flex-direction: column;
    margin: 0;
    max-width: 100%;
    overflow: hidden;

    @include ecl-media-breakpoint-up('xl') {
      flex-direction: row;
      max-height: 100vh;
    }
  }

  // When carousel is a dialog.
  .ecl-carousel[aria-hidden='true'] {
    display: none;
  }

  .ecl-carousel[aria-hidden='false'] {
    display: flex;
    height: 90vh;
    left: 3%;
    position: absolute;
    top: 3%;
    width: 90%;
    z-index: map-get($ecl-z-index, 'modal');
  }

  .ecl-carousel__list-wrapper {
    display: flex;
    max-height: 70vh;
    overflow: hidden;
    position: relative;
  }

  /* stylelint-disable-next-line order/order */
  @include ecl-media-breakpoint-up('xl') {
    .ecl-carousel__list-wrapper {
      flex: 1;
      max-height: 100%;
    }
  }

  .ecl-carousel__controls {
    margin: 0;
  }

  .ecl-carousel__list {
    display: flex;
    margin: 0;
    white-space: nowrap;
    width: 100%;
  }

  .ecl-carousel__item {
    flex: 1 0 100%;
    position: relative;
  }

  .ecl-carousel__image {
    display: block;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
  }

  .ecl-carousel__button {
    @include ecl-focus-outline-border();

    background-color: #000;
    border: 0;
    color: #fff;
    font-size: map-get($ecl-font-size, 'xxl');
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: map-get($ecl-z-index, 'navigation');
  }

  .ecl-carousel__button--previous {
    left: 0;
  }

  .ecl-carousel__button--next {
    right: 0;
  }

  // JS will show only the necessary one by a data attribute.
  .ecl-carousel__image-information {
    display: none;
    text-align: left;
  }

  .ecl-carousel__live-region {
    background-color: map-get($ecl-colors, 'grey-100');
    box-sizing: border-box;
    color: #fff;
    min-width: 30%;
    padding: map-get($ecl-spacing, 'l');

    a {
      color: #fff;
    }
  }

  /* stylelint-disable-next-line order/order */
  @include ecl-media-breakpoint-up('xl') {
    .ecl-carousel__live-region {
      flex: 0;
      max-height: 100%;
    }
  }

  .ecl-carousel__meta {
    margin-bottom: map-get($ecl-spacing, 'l');
  }

  // Every link has specific styling.
  .ecl-carousel__meta-link {
    padding-right: map-get($ecl-spacing, 'm');
    position: relative;

    // put icon on right without extends
    &::before {
      position: absolute;
      right: 0;
    }
  }

  .ecl-carousel__meta-item {
    display: inline-block;
    margin-right: map-get($ecl-spacing, 'xs');
    padding-bottom: map-get($ecl-spacing, 'xxxs');
  }

  .ecl-carousel__meta-slide {
    order: -1;
    padding-top: map-get($ecl-spacing, 's');
  }

  .ecl-carousel__image-copyright {
    font-size: map-get($ecl-font-size, 'xxs');
  }

  /* Show information in a similar flow as if there were js. */
  .no-js {
    .ecl-carousel__list-wrapper {
      overflow-x: initial;
    }

    .ecl-carousel__list {
      align-items: center;
      height: 100%;
      justify-content: flex-start;
    }

    .ecl-carousel__item {
      opacity: 1;
    }

    .ecl-carousel__image-information {
      border-bottom: 1px solid #fff;
      display: block;
      margin-bottom: map-get($ecl-spacing, 's');
      padding-bottom: map-get($ecl-spacing, 's');
    }

    .ecl-carousel__live-region {
      overflow-y: auto;
    }
  }
}