/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import * as styled from 'styled-components';
import {theme, paddings} from 'components/shared/theme';

const {
  colors,
  fontSizeS,
  spacing,
  primaryThemeColor
} = theme;

export const PaginationContainer = styled.default.div`
  display: flex;
  width: 100%;
  align-items: center;
  flex-wrap: wrap;
  margin: ${spacing.small} 0;
`;

export const PaginationWrapper = styled.default.div`
  display: flex;
  flex-wrap: wrap;
`;

export const ItemRange = styled.default.div`
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
  font-size: ${fontSizeS};
  color: ${colors.lightBlue};
`;

export const PageButton = styled.default.button <{active?: boolean}>`
  margin: 0 ${paddings.xsmall} ${paddings.xsmall} 0;
  font-size: ${fontSizeS};
  border: 1px solid ${primaryThemeColor};
  border-radius: 4px;
  height: 28px;
  width: 36px;
  cursor: pointer;
  background-color: ${({active}) => active ? primaryThemeColor : 'transparent'};
  color: ${({active}) => active ? colors.white : primaryThemeColor};
`;