import React from 'react';
import styled from 'styled-components';
import { Flexbox, Typography } from '../../../../index';
var StyledFlexbox = styled(Flexbox).withConfig({
  displayName: "RegularComponents__StyledFlexbox",
  componentId: "sc-19b7df5-0"
})(["width:", "px;"], function (p) {
  var NUMBER_WIDTH = p.theme.spacing.unit(4.5);
  var CHEVRON_PADDING = 2 * p.theme.spacing.unit(2);
  var BETWEEN_8_AND_13_PAGES_WIDTH = p.theme.spacing.unit(38);
  var BETWEEN_14_AND_101_PAGES_WIDTH = p.theme.spacing.unit(42);
  var MORE_THAN_101_PAGES_WIDTH = p.theme.spacing.unit(50);
  if (p.$numberOfPages < 8) return p.$numberOfPages * NUMBER_WIDTH + CHEVRON_PADDING;
  if (p.$numberOfPages >= 8 && p.$numberOfPages <= 13) return BETWEEN_8_AND_13_PAGES_WIDTH;
  if (p.$numberOfPages >= 14 && p.$numberOfPages <= 101) return BETWEEN_14_AND_101_PAGES_WIDTH;
  return MORE_THAN_101_PAGES_WIDTH;
});
var TruncatedPageNumbers = function TruncatedPageNumbers() {
  return React.createElement(Flexbox, {
    item: true,
    container: true,
    alignItems: "center",
    as: "li"
  }, React.createElement(Typography, {
    type: "secondary",
    weight: "bold"
  }, "..."));
};
export { StyledFlexbox, TruncatedPageNumbers };