@import '../style/functions.scss';
@import '../style/theme.scss';
@import '../style/mixins.scss';

$prefix-cls: 'dk-pagination';

.#{$prefix-cls} {
  @include reset-component();
  display: flex;

  &-prev,
  &-next,
  &-item {
    display: flex;
    min-width: $pagination-size;
    height: $pagination-size;
    margin-right: $pagination-margin-right;
    padding: 0 $pagination-padding-x;
    border: $border-width solid $border-color;
    border-radius: $border-radius;
    background-color: $white;
    color: $pagination-item-color;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    transition: $pagination-transition;

    &:focus,
    &:hover {
      outline: 0;
      text-decoration: none;
    }

    &:hover {
      border-color: $primary;
      color: $primary;
      background-color: lighten($primary, 70%);
    }
  }

  &-active {
    z-index: 1;
    color: $white;
    background-color: $primary;
    border-color: $primary;
    cursor: default;

    &:hover,
    &:focus {
      color: $white;
      background-color: $primary;
      border-color: $primary;
    }
  }

  &-disabled {
    opacity: $pagination-disabled-opacity;
    pointer-events: none;
  }

  &-prev,
  &-next {
    i {
      font-size: 16px;
    }
  }

  &-miss {
    border: 0;
    font-size: 0;
    cursor: default;

    &:hover {
      background-color: inherit;
    }

    i {
      display: inline-block;
      width: 4px;
      height: 4px;
      margin: 0 1.5px;
      background-color: #d9d9d9;
      border-radius: 50%;
    }
  }

  &-small &-item,
  &-small &-prev,
  &-small &-next {
    min-width: $pagination-size-sm;
    height: $pagination-size-sm;
    font-size: $font-size-sm;
    border-radius: $border-radius-sm;
  }


  &-small &-prev,
  &-small &-next {
    border: 0;

    &:hover {
      background-color: transparent;
    }
  }

  &-large &-item,
  &-large &-prev,
  &-large &-next {
    min-width: $pagination-size-lg;
    height: $pagination-size-lg;
    font-size: $font-size-lg;
    border-radius: $border-radius-lg;
  }


  &-large i {
    font-size: 20px;
  }
}