// @import '../../core/global';
@import '~@cainiaofe/cn-ui-m-theme/token.px.scss';
@import '../../../styles/mixins.scss';
@import 'variable';

$class-prefix: 'cn-ui-m';

.#{$hashClassName}.#{$class-prefix}-pagination {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  // $m-s-20
  // @each $size in $sizes {
  //   // element
  //   &--#{$size} {
  //     &-text {
  //       padding-left: var(--pagination-#{$size}-text-padding-left);
  //       padding-right: var(--pagination-#{$size}-text-padding-right);
  //       text-align: center;

  //       &-number {
  //         font-size: var(--pagination-#{$size}-text-number-font-size);
  //       }
  //       &-mini {
  //         width: var(--pagination-#{$size}-text-mini-width);
  //       }
  //     }
  //     &-icon {
  //       font-size: var(--pagination-#{$size}-icon-font-size);
  //     }
  //   }
  // }
  &--small {
    &-text {
      padding-left: var($m-s-20);
      padding-right: var($m-s-20);
      text-align: center;

      &-number {
        font-size: var($m-s-16);
      }
      &-mini {
        width: var($m-s-12);
      }
    }
    &-icon {
      font-size: var($m-s-36);
    }
  }
  .#{$class-prefix}-pagination {
    &-text {
      @include flex(row, center, center);

      &-current {
        color: var($m-color-primary);
      }
      &-select-drawer {
        --select-drawer-padding-lr: 0;
      }
    }

    &-icon {
      color: var($m-color-text-title1);
      &--first {
        margin-right: 0;
      }
      &--last {
        margin-left: 0;
      }
      &--disabled {
        color: var($m-color-text-disabled);
      }
    }
  }

  .cn-ui-m-button .cn-ui-m-icon {
    margin-right: 0px;
  }
}