/**
 * Pagination 分页
 * @Author 瞿龙俊 - qulongjun@shine.design
 * @Date 2020-03-28 13:02
 */

// Base
.#{$classPrefix}-pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0;
  padding: 0;

  .#{$classPrefix}-pagination__links, .#{$classPrefix}-pagination__links li a {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .#{$classPrefix}-pagination__links {
    list-style-type: none;
    margin: 0;
    padding: 0;

    li {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 0.5rem;

      @include shine-rounded {
        border-radius: 4px;
      }

      a {
        font-weight: 500;
        color: shine-base-color(label, 2);
        font-size: 1rem;
        padding: 0 0.2rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        min-width: 30px;
        min-height: 30px;
        margin: 0;
      }
    }

    .#{$classPrefix}-pagination__link--active {
      a {
        color: shine-brand-color(inverse);
      }
    }
  }

  // Toolbar
  .#{$classPrefix}-pagination__toolbar {
    margin: 0;
    display: flex;
    align-items: center;
    padding: 0;

    .form-control {
      padding: 0;
      margin-right: 10px;
      height: 30px;
      font-weight: 600;
      font-size: 1.1rem;
      font-weight: 500;
      line-height: 1;
      outline: none;
      border: none;
    }

    .pagination__desc {
      flex-grow: 1;
      font-weight: 500;
      color: shine-base-color(label, 2);
    }
  }

  @each $name, $color in $shine-state-colors {
    &.#{$classPrefix}-pagination--#{$name} {

      .#{$classPrefix}-pagination__links {
        .#{$classPrefix}-pagination__link--common, .#{$classPrefix}-pagination__link--first, .#{$classPrefix}-pagination__link--next, .#{$classPrefix}-pagination__link--prev, .#{$classPrefix}-pagination__link--last {
          background: rgba(shine-get($color, base), 0.1);
        }

        .#{$classPrefix}-pagination__link--active {
          background: shine-get($color, base);
        }

        li {
          &:hover {
            background: shine-get($color, base);
            transition: color 0.3s ease;

            a {
              color: shine-brand-color(inverse);
              cursor: pointer;

              i {
                color: #fff !important;
              }
            }
          }
        }
      }
      .#{$classPrefix}-pagination__toolbar {
        .form-control {
          background: rgba(shine-get($color, base), 0.1);
        }
      }
    }
  }

  // Circle style links
  &.#{$classPrefix}-pagination--circle {
    .#{$classPrefix}-pagination__links {
      li {
        min-width: 30px;
        min-height: 30px;

        @include shine-rounded {
          border-radius: 50%;
        }
      }
    }
  }

  // Sizing options
  &.#{$classPrefix}-pagination--lg {
    .#{$classPrefix}-pagination__links {
      li {
        a {
          font-size: 1.3rem;
          min-width: 35px;
          min-height: 35px;
        }

      }
    }

    .#{$classPrefix}-pagination__toolbar {
      .form-control {
        height: 35px;
        font-size: 1.2rem;
        padding: 0.2rem 0 0.2rem 0.2rem;
      }
    }
  }

  &.#{$classPrefix}-pagination--sm {
    .#{$classPrefix}-pagination__links {
      li {
        a {
          font-size: 1rem;
          min-width: 25px;
          min-height: 25px;
        }

      }
    }

    .#{$classPrefix}-pagination__toolbar {
      .form-control {
        height: 25px;
        font-size: 0.9rem;
      }
    }
  }
}

@include shine-mobile {
  .#{$classPrefix}-pagination {
    .#{$classPrefix}-pagination__links {
      display: flex;
      flex-wrap: wrap;

      li {
        margin: 0.3rem 0.5rem 0.3rem 0;;

        a {
          font-size: 0.9rem;
          min-width: 25px;
          min-height: 25px;
        }
      }
    }

    .#{$classPrefix}-pagination__toolbar {
      .form-control {
        height: 25px;
        font-size: 0.9rem;
        padding: 0.2rem 0 0.2rem 0.2rem;
      }
    }
  }
}