.yc-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  .yc-pagination-total {
    height: 100%;
    color: var(--color-text-1);
    white-space: nowrap;
  }
  .yc-pagination-list {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .yc-pagination-simple {
    display: flex;
    align-items: center;
    .yc-pagination-jumper-simple {
      gap: 0;
      padding: 0 4px;
      .yc-pagination-jumper-separator {
        padding: 0 12px;
      }
      .yc-pagination-jumper-total-page {
        padding-right: 8px;
      }
    }
  }
  .yc-pagination-item {
    outline: 0;
    cursor: pointer;
    user-select: none;
    padding: 0 8px;
    border-radius: var(--border-radius-small);
    background-color: transparent;
    color: var(--color-text-2);
    display: flex;
    justify-content: center;
    align-items: center;
    transition:
      color 0.2s cubic-bezier(0, 0, 1, 1),
      background-color 0.2s cubic-bezier(0, 0, 1, 1);
    &:not(.yc-pagination-item-disabled):not(.yc-pagination-item-active):hover {
      background-color: var(--color-fill-1);
      &.yc-pagination-item-previous,
      &.yc-pagination-item-next {
        color: rgb(var(--primary-6));
      }
    }
    &.yc-pagination-item-disabled {
      color: var(--color-text-4);
      cursor: not-allowed;
      background-color: transparent;
      &.yc-pagination-item-active {
        color: var(--color-primary-light-3);
        background-color: var(--color-fill-1);
      }
    }
    &.yc-pagination-item-active {
      color: rgb(var(--primary-6));
      background-color: var(--color-primary-light-1);
    }
  }
  .yc-pagination-options {
    .yc-select {
      width: 110px;
    }
  }
  .yc-pagination-jumper {
    display: flex;
    align-items: center;
    gap: 8px;
    .yc-input-outer {
      width: 40px;
      .yc-input-wrapper {
        padding-left: 2px;
        padding-right: 2px;

        .yc-input {
          text-align: center;
        }
      }
    }
    .yc-pagination-jumper-text-goto {
      color: var(--color-text-3);
      white-space: nowrap;
    }
  }
}
// size
@size: {
  @mini: {
    font-size: 12px;
    item-size: 24px;
  };
  @small: {
    font-size: 14px;
    item-size: 28px;
  };
  @medium: {
    font-size: 14px;
    item-size: 32px;
  };
  @large: {
    font-size: 14px;
    item-size: 36px;
  };
};
each(@size, .(@value,@name){
  @key:replace(~"@{name}", "@", "");
  .yc-pagination-size-@{key} {
    .yc-pagination-total {
      font-size:  @value[font-size];
      line-height:  @value[item-size];
    }
    .yc-pagination-item {
      min-width:  @value[item-size];
      height:  @value[item-size];
      font-size:  @value[font-size];
      line-height:  @value[item-size];
    }
    .yc-pagination-jumper > span {
      font-size:  @value[font-size];
    }
    
    & when (@key = mini) {
      .yc-pagination-options {
        .yc-select{
          width:  102px;
        }
      }
    }
  }
});
