.efly-page {
  font-size: $font-default;
  line-height: 1;

  .efly-page-one, .efly-page-two, .efly-page-three, .efly-page-four {
    @include box();
    @include flex-align-center();
  }

  .efly-page-size {
    margin-left: $space-xs;

    .efly-select {
      width: 50px;

      input {
        padding: $space-xs;
      }

      .icon {

      }
    }
  }

  .efly-page-operate {
    @include box();

    .efly-button {
      margin-left: $space-xs !important;
    }

    .efly-page-current {
      margin-left: $space-xs;
      @include box();
      @include flex-center();
      min-width: 40px;
      padding: $space-xs;
      box-sizing: border-box;
      height: $height-default;
      border: 1px solid $color-border-base;
    }

    .efly-page-skip {
      @include box();
      @include flex-center();

      .efly-button {
        min-width: auto;
        height: 30px;
        margin-left: $space-small;
      }
    }
  }

  .efly-page-four {
    .efly-button-group {
      margin-left: $space-xs;
    }
  }

}

$page-size: (name: "small", font: $font-small, padding: $space-mini, height: $height-small),
(name: "mini", font: $font-mini, padding: $space-8, height: $height-mini);
@for $i from 1 through length($page-size) {
  $item: nth($page-size, $i);
  $name: map-get($item, name);
  $font: map-get($item, font);
  $padding: map-get($item, padding);
  $height: map-get($item, height);
  .efly-page-#{$name} {
    font-size: $font;

    .efly-page-operate {

      .efly-page-current {
        height: $height;
      }
    }
  }
}