@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$pagination: () !default;
$pagination: map.merge(
  (
    color: inherit,
    color-hover: value('color-primary-base'),
    color-focus: value('pagination-color-hover'),
    color-disabled: value('content-color-disabled'),
    color-active: value('pagination-color-hover'),
    bg-color: value('fill-color-background'),
    bg-color-hover: value('color-primary-opacity-8'),
    bg-color-focus: value('pagination-bg-color-hover'),
    bg-color-disabled: value('pagination-bg-color'),
    bg-color-active: value('color-primary-base'),
    b-color: value('border-color-base'),
    b-color-hover: value('color-primary-base'),
    b-color-focus: value('pagination-b-color-hover'),
    b-color-disabled: value('fill-color-disabled'),
    b-color-active: value('pagination-b-color-hover'),
    s-color-focus: value('color-primary-opacity-6'),
    border: value('border-shape') value('pagination-b-color'),
    radius: value('radius-base'),
    size: 32px,
    item-span: 6px,
    plugin-span: 10px
  ),
  $pagination
);

.#{$namespace}-pagination {
  &-vars {
    @include define-preset-values('pagination', $pagination);
  }

  @mixin define-pagination-style($style-map) {
    @include define-preset-style('pagination', $style-map);
  }

  @include basis {
    display: inline-flex;
    align-items: center;
  }

  &--small {
    @include define-css-var('pagination-size', 28px);
  }

  &--large {
    @include define-css-var('pagination-size', 36px);
  }

  &__list {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
  }

  $item: #{&}__item;

  @mixin item-disabled {
    color: value('pagination-color-disabled');
    cursor: not-allowed;
    border-color: value('pagination-b-color-disabled');
    box-shadow: none;
  }

  &__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: value('pagination-size');
    height: value('pagination-size');
    padding: 0 6px;
    margin-inline-end: value('pagination-item-span');
    list-style: none;
    cursor: pointer;
    user-select: none;
    border: value('pagination-border');
    border-radius: value('pagination-radius');
    outline: 0;
    transition: value('transition-color'), value('transition-background'),
      value('transition-border'), value('transition-shadow');

    &:last-of-type {
      margin-inline-start: 0;
    }

    &:hover {
      color: value('pagination-color-hover');
      border-color: value('pagination-b-color-hover');
    }

    &:focus,
    &:focus-within {
      color: value('pagination-color-focus');
      border-color: value('pagination-b-color-focus');
      box-shadow: value('shadow-focus') value('pagination-s-color-focus');
    }

    &--active {
      color: value('pagination-color-active');
      border-color: value('pagination-b-color-active');
    }

    &--disabled {
      &,
      &:hover,
      &:focus,
      &:focus-within,
      &#{$item}--active {
        @include item-disabled;
      }

      &#{$item}--active {
        background-color: value('pagination-bg-color-disabled');
      }
    }
  }

  &--background &__item {
    background-color: value('pagination-bg-color');

    &:hover {
      background-color: value('pagination-bg-color-hover');
    }

    &:focus,
    &:focus-within {
      background-color: value('pagination-bg-color-focus');
    }

    &--active {
      @include define-pagination-style(
        (
          color-active: 'color-white',
          color-hover: 'color-white',
          color-focus: 'color-white',
          bg-color-disabled: 'fill-color-disabled'
        )
      );

      &,
      &:hover,
      &:focus {
        background-color: value('pagination-bg-color-active');
      }
    }

    &--disabled {
      &,
      &:hover,
      &:focus,
      &:focus-within {
        background-color: value('pagination-bg-color-disabled');
      }
    }
  }

  &--no-border &__item {
    border: 0;
  }

  &__jump,
  &__size,
  &__total {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  &__jump {
    white-space: nowrap;
    user-select: none;

    &-input {
      min-width: 60px;
      height: value('pagination-size');
      margin: 0 4px;
      user-select: auto;
    }
  }

  &__size {
    min-width: 106px;

    &-select {
      width: 100%;

      .#{$namespace}-select__selector {
        height: value('pagination-size');
      }
    }
  }

  &__total {
    white-space: nowrap;
  }

  & > &__jump,
  & > &__size,
  & > &__total {
    margin-inline-start: value('pagination-plugin-span');

    &--prefix {
      margin-inline: 0 value('pagination-plugin-span');
    }
  }
}