%item-shared {
  height: var(--amplify-components-pagination-item-shared-height);
  min-width: var(--amplify-components-pagination-item-shared-min-width);
  border-radius: var(--amplify-components-pagination-item-shared-border-radius);
}

.amplify-pagination {
  list-style-type: none;
  li {
    margin-left: var(
      --amplify-components-pagination-item-container-margin-left
    );
    margin-right: var(
      --amplify-components-pagination-item-container-margin-right
    );
  }
  &__item-button {
    @extend %item-shared;

    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: initial;
    color: var(--amplify-components-pagination-button-color);
    padding-inline-start: var(
      --amplify-components-pagination-button-padding-inline-start
    );
    padding-inline-end: var(
      --amplify-components-pagination-button-padding-inline-end
    );
    transition-property: var(
      --amplify-components-pagination-button-transition-property
    );
    transition-duration: var(
      --amplify-components-pagination-button-transition-duration
    );

    &:hover {
      text-decoration: none;
      color: var(--amplify-components-pagination-button-hover-color);
      background-color: var(
        --amplify-components-pagination-button-hover-background-color
      );
    }
    &--disabled {
      color: var(--amplify-components-pagination-button-disabled-color);
      pointer-events: none;
    }
  }

  &__item-current {
    @extend %item-shared;
    align-items: var(--amplify-components-pagination-current-align-items);
    justify-content: var(
      --amplify-components-pagination-current-justify-content
    );

    color: var(--amplify-components-pagination-current-color);
    font-size: var(--amplify-components-pagination-current-font-size);
    background-color: var(
      --amplify-components-pagination-current-background-color
    );
  }

  &__item-ellipsis {
    align-items: var(--amplify-components-pagination-ellipsis-align-items);
    justify-content: var(
      --amplify-components-pagination-ellipsis-justify-content
    );
    padding-inline-start: var(
      --amplify-components-pagination-ellipsis-padding-inline-start
    );
    padding-inline-end: var(
      --amplify-components-pagination-ellipsis-padding-inline-end
    );
  }
}