@use "@infineon/design-system-tokens/dist/tokens";

.page-item:not(:first-of-type) .page-link {
  margin-left: 0;
}

.page-item.active .page-link {
  background-color: tokens.$color-default-500;
}

.page-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 1px;
  font-weight: 600;
  color: tokens.$color-text-black;
  padding: 0;

  &:focus {
    color: tokens.$color-text-black;
    background-color: tokens.$color-bg-white;
    box-shadow: none;
  }

  &:focus-visible {
    box-shadow: 0 0 0 2px tokens.$color-default-500;
  }

  &:hover {
    color: tokens.$color-text-black;
    background-color: tokens.$color-gray-200;

    & .fa-chevron-left,
    & .fa-chevron-right {
      color: tokens.$color-text-black;
    }
  }
}

.pagination-sm {
  & .page-link {
    padding: 0;
    width: 32px;
    height: 32px;
  }
}

.pagination-lg {
  & .page-link {
    padding: 0;
    width: 40px;
    height: 40px;
  }
}

.pagination-sm .page-item:first-of-type .page-link {
  border-top-left-radius: 1px;
  border-bottom-left-radius: 1px;
}

.page-item:first-of-type .page-link {
  border-top-left-radius: 1px;
  border-bottom-left-radius: 1px;
}

.pagination-lg .page-item:first-of-type .page-link {
  border-top-left-radius: 1px;
  border-bottom-left-radius: 1px;
}

.pagination-sm .page-item:last-child .page-link {
  border-top-right-radius: 1px;
  border-bottom-right-radius: 1px;
}

.page-item:last-child .page-link {
  border-top-right-radius: 1px;
  border-bottom-right-radius: 1px;
}

.pagination-lg .page-item:last-child .page-link {
  border-top-right-radius: 1px;
  border-bottom-right-radius: 1px;
}

.ifx {
  &__page-link {
    &--first,
    &--previous {
      border-right: 1px solid tokens.$color-gray-200;
    }

    &--next,
    &--last {
      border-left: 1px solid tokens.$color-gray-200;
    }
  }
}

.pagination {
  .fa-chevrons-left,
  .fa-chevrons-right {
    color: tokens.$color-gray-300;
  }
}