/**
 * Pagination
 * @define pagination
 */

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

// Exposed variables
$theme: null !default;
$pagination: null !default;

@mixin item-styles {
  align-items: center;
  justify-content: center;
  border-radius: map.get($theme, 'border-radius', 's');
  box-sizing: border-box;
  display: flex;
  margin-inline-end: map.get($pagination, 'item-margin-end');
  min-height: map.get($pagination, 'item-size');
  min-width: map.get($pagination, 'item-size');
  padding: map.get($pagination, 'item-padding');

  &:hover {
    color: map.get($pagination, 'item-hover-color');
  }

  &:focus-visible {
    background: transparent;
    border: map.get($pagination, 'focus-border');
    border-radius: map.get($pagination, 'focus-radius');
    outline: map.get($pagination, 'focus-outline');
    outline-offset: 0;
  }

  &:active {
    background: map.get($pagination, 'current-background');
    color: map.get($pagination, 'current-text-color-desktop');
  }
}

.ecl-pagination {
  border-top: 1px solid map.get($pagination, 'border-color');
  color: map.get($pagination, 'text-color');
  font: var(--f-m);
  margin: 0;
  padding: map.get($pagination, 'padding');
}

.ecl-pagination__list {
  align-items: center;
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding-inline-start: 0;
  position: relative;
}

.ecl-pagination__item {
  display: none;
}

.ecl-pagination__link,
.ecl-pagination__item--truncation {
  color: map.get($pagination, 'item-default-color');

  @include item-styles;
}

.ecl-pagination__item--truncation {
  display: none;

  &:active {
    background: transparent;
    color: var(--c-d);
  }
}

.ecl-pagination__item--next {
  justify-content: flex-end;

  .ecl-pagination__link {
    margin-inline-end: 0;
  }
}

.ecl-pagination__item--previous,
.ecl-pagination__item--next {
  display: flex;
  flex-basis: 0;
  flex-grow: 1;

  .ecl-pagination__link {
    color: var(--c-p);

    &:hover {
      background: map.get($pagination, 'prev-next-hover-background');
      box-shadow: map.get($pagination, 'prev-next-hover-shadow');
      border: map.get($pagination, 'prev-next-hover-border');
      color: map.get($pagination, 'prev-next-hover-color');
    }

    &:active {
      background: map.get($pagination, 'prev-next-active-background');
      border: map.get($pagination, 'prev-next-active-border');
      color: map.get($pagination, 'current-text-color-mobile');
    }
  }
}

.ecl-pagination__item--current {
  color: map.get($pagination, 'current-text-color-mobile');
  display: flex;
  position: relative;
}

.ecl-pagination__text--summary {
  display: none;
}

.ecl-pagination__text--full {
  display: block;
}

/* stylelint-disable-next-line order/order */
@include breakpoints.up('m') {
  .ecl-pagination {
    padding-inline-start: 0;
    padding-inline-end: 0;
  }

  .ecl-pagination__list {
    justify-content: center;
  }

  .ecl-pagination__item {
    color: map.get($pagination, 'item-default-color');
    display: flex;
    flex-grow: 0;

    &--current {
      background: map.get($pagination, 'current-background');
      border-radius: map.get($pagination, 'current-radius');
      color: map.get($pagination, 'current-text-color-desktop');

      @include item-styles;

      &:hover {
        color: map.get($pagination, 'current-text-color-desktop');
      }
    }

    &:last-child {
      margin-inline-end: 0;
    }
  }

  .ecl-pagination__item--truncation {
    display: flex;
  }

  .ecl-pagination__item--previous,
  .ecl-pagination__item--next {
    flex-basis: auto;
  }

  .ecl-pagination__text--summary {
    display: block;
  }

  .ecl-pagination__text--full {
    display: none;
  }
}
